angularjs - Compiling a directive inside another directive -

i have directive can output plain html or directive. i'm having trouble getting inner directive compile, right angular sticking actual directive tag html without compiling it.

here's screenshot of chrome inspector showing un-compiled directive

basically, using $sce.trustashtml("<html-string-here>") allow html, not compile directive.

if wrap in $compile($sce.trustashtml("<html-string-here>"))($scope) throws errors. what missing here?

---

full demo here: http://jsfiddle.net/chrismbarr/nozaulzo/3/

simplified demo explained below

---

i have list

$scope.list = [{     id:1,     content: "some plain text" },{     id:2,     content: "<strong>some html!</strong>" },{     id:3,     content: "<inner-directive text='a directive!'></inner-directive>" }]; 

i bind list this:

<outer-directive ng-repeat="item in list" data="item"></outer-directive> 

and directive built this

mytestapp.directive("outerdirective",["$sce", "$compile", function($sce, $compile){      function getlink($scope){         var trustedhtml = $sce.trustashtml($scope.data.content);         $scope.trustedcontent = trustedhtml;         //this break it!         //var compiledhtml = $compile(trustedhtml)($scope);         //$scope.trustedcontent = compiledhtml ;         //console.log(trustedhtml, compiledhtml)     }       function gettemplate(){          return ""+              "<div class='outer'>"+              "  #{{data.id}} -- "+              "  <span ng-bind-html='trustedcontent'></span>"+              "</div>";     }      return {         restrict: "e",         replace: true,         scope: {             data: "="         },         link: getlink,         template: gettemplate     }; }]);