title: Angularjs not trusting HTML in custom directive despite $sce.trustAsHtml()
body: <p>I am learning AngularJS.  I am trying to create a custom directive that implements a tabbed notebook, with pages.  Here it is on JSFiddle.</p>
  
  <p><a href="http://jsfiddle.net/kdtop/rxuchg1t/" rel="nofollow">http://jsfiddle.net/kdtop/rxuchg1t/</a></p>
  
  <p>On tab 2, notice that one can see: "Content [B]for[/B] tab 2".  I.e. the [B] [/B] tags are not rendered.</p>
  
  <p>Here is the definition of the directive where I try to use $sce.trustAsHtml(): </p>
  
  <pre><code>MyApp.directive('tmgTabsCtrl', ['$sce', function ($sce) {
  return {
      restrict: 'E',
      require: '?tabControl',
      scope: {
          tabControl: '=',
      },
      template: '                                                                    \
      &lt;BR&gt;                                                                           \
      &lt;ul class="nav nav-tabs"&gt;                                                      \
        &lt;li ng-repeat="i in range(0, tabControl.Tabs.Count()-1)"                     \
          ng-class="{active: tabControl.IsSelected(i)}"                              \
          ng-click="alert(\'test\')" &gt;                                               \
          &lt;a href="#{{i}}"  ng-click="ToggleActive(i)"&gt;{{tabControl.TabName(i)}}&lt;/a&gt; \
        &lt;/li&gt;                                                                        \
      &lt;/ul&gt;                                                                          \
      &lt;div class="tab-content"&gt;                                                      \
        {{trustAsHtml(tabControl.TabContent()) }}                                    \
      &lt;/div&gt;  ',
  
      link: function (scope, el, attrs) {
          scope.range = RangeFn;
          scope.ToggleActive = function (Index) {
              scope.tabControl.Select(Index);
          };
          scope.trustAsHtml = function (Html) {
              return $sce.trustAsHtml(Html);
          };
      }
  };
  }]);
  </code></pre>
  
  <p>My ultimate goal is to allow the tabControl.Content() function to return text with HTML will all sorts of HTML, including other custom directives as a form of web components.</p>
  
  <p>Do I need to $compile() the text somehow?  What am I doing wrong??</p>
  
  <p>I have tried reviewing the other questions that StackOverflow links as similar, but I can't find an answer to my question.</p>
  
  <p>Thanks in advance.</p>