title: Why infinite digest error while compiling html text (from db) which contains a directive
body: <ul>
  <li><p>I have a controller (say SampleController), in which it gets data (as following html text) from $http service &amp; assigning it to $scope.htmlText </p>
  
  <pre><code>&lt;p&gt;This is some content text
       &lt;span class='sampleClassDirective' pid='1'&gt;P1 Value&lt;/span&gt; 
       some other text 
       &lt;span class='sampleClassDirective' pid='2'&gt;P2 Value&lt;/span&gt; 
  some more text &lt;/p&gt;
  </code></pre></li>
  <li><p>I want to render this html text in a view. As it is html text, I can use ng-html-bind directive to render the html-text as it is.</p></li>
  <li><p>but i want to compile the html text, so that directives inside html text can get their templates if any</p></li>
  <li><p><strong>Actual problem starts here</strong></p></li>
  <li>As you can see above content has some tags with class="sampleClassDirective"</li>
  <li>I have a directive with name as "sampleClassDirective"</li>
  <li><p>This directive uses ui.bootstrap popover component in its template</p>
  
  <pre><code>angular.module('app').dirctive('sampleClassDirective', 
      function(){
         return {
             restrict:'C',
             transclude:true,
             template:'&lt;span uib-popover="This is pid"&gt;'+
                         '&lt;ng-transclude&gt;&lt;/ng-transclude&gt;'+
                      '&lt;/span&gt;'
         }
      });
  </code></pre></li>
  <li><p>Now, I want to compile the whole htmlText which I got in sampleController, so that the "sampleClassDirective" &amp; "uib-popover" both gets compiled.</p></li>
  <li><p>So In view I gave  </p>
  
  <pre><code>&lt;div id='htmlContent' ng-bind-html='render()'&gt;&lt;/div&gt;
  </code></pre></li>
  <li><p>In sampleController</p>
  
  <pre><code>$scope.render = function(){
      var elm = angular.element(htmlText);
      // compiling each directive
      var classDirectives = $(elm).find(".sampleClassDirective");
      for(var i=0, iMax=classDirectives.length; i&lt;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());
  }
  </code></pre></li>
  <li><p>**Question : **</p></li>
  <li>While it is getting compiled, why I'm getting $rootScope infinite $digest error &amp; it is aborting?</li>
  </ul>