angularjs - $digest再帰エラーを取得せずにディレクティブ内に$compile'd HTMLコードを挿入する方法は?

Question

ng-repeat(データベースからの) 項目データに応じて、大文字と小文字を切り替えてカスタム HTML を作成するディレクティブがあります。

app.directive('steps', function($compile){
  return {
    'restrict': 'A',
    'template': '<h3>{{step.name}}</h3><ul ng-repeat="opt in step.opts"><div ng-bind-html-unsafe="extra(opt)"></div></ul>',
    'link': function($scope, $element){
       $scope.extra = function(opt){
         switch ($scope.step.id){
           case 1:
             return "<div>Some extra information<select>...</select></div>"
           case 2:
             return "<div><input type='checkbox' ng-model='accept'> Accept terms</div>"
           case 3:
             return "<div>{{step.title}}<select multiple>...</select></div>"
        }
       }
    }
  }
});

上記のコードは機能しますが、関数内の bindable{{step.title}}は機能しません。私は試し$compile(html)($scope)ましたが、それは私に与えましたError: 10 $digest() iterations reached. Aborting!。これにどう対処すればいいですか？