Почему бесконечная ошибка дайджеста при компиляции html-текста (из БД), который содержит директиву

У меня есть контроллер (скажем, SampleController), в котором он получает данные (в виде следующего html-текста) из службы $http и назначает их $scope.htmlText

<p>This is some content text
     <span class='sampleClassDirective' pid='1'>P1 Value</span> 
     some other text 
     <span class='sampleClassDirective' pid='2'>P2 Value</span> 
some more text </p>

Я хочу отобразить этот html-текст в представлении. Поскольку это html-текст, я могу использовать директиву ng-html-bind для отображения html-текста как есть.

но я хочу скомпилировать html-текст, чтобы директивы внутри html-текста могли получить свои шаблоны, если таковые имеются

Настоящая проблема начинается здесь

Эта директива использует всплывающий компонент ui.bootstrap в своем шаблоне.

angular.module('app').dirctive('sampleClassDirective', 
    function(){
       return {
           restrict:'C',
           transclude:true,
           template:'<span uib-popover="This is pid">'+
                       '<ng-transclude></ng-transclude>'+
                    '</span>'
       }
    });

Теперь я хочу скомпилировать весь htmlText, который я получил в sampleController, чтобы были скомпилированы «sampleClassDirective» и «uib-popover».

Итак, я дал

<div id='htmlContent' ng-bind-html='render()'></div>

В SampleController

$scope.render = function(){
    var elm = angular.element(htmlText);
    // compiling each directive
    var classDirectives = $(elm).find(".sampleClassDirective");
    for(var i=0, iMax=classDirectives.length; i<iMax; i++){
        $(elm).find(".sampleClassDirective")[i].append($compile(classDirectives[i])($scope));
    }
    // or can we compile all htmlText at once?
    // elm = $compile(elm)($scope)

    return $sce.trustAsHtml($(elm).html());
}

**Вопрос : **