从控制器对象绑定html指令（字符串）

Question

我试图从包含标签标题和html元素的控制器对象渲染指令。 这是控制器和指令：

.controller('OptionsTabsCtrl', function($scope, $compile, $timeout, $mdSidenav, $mdDialog, $mdMedia, $mdToast, $sce) {
    $scope.tabs = [{
        title: 'name',
        content: $sce.trustAsHtml('<layer-headers></layer-headers>')
    }, {
        title: 'styles',
        content: $sce.trustAsHtml("<styles></styles>")
    }, {
        title: 'labels',
        content: $sce.trustAsHtml("<labels></labels>")
    }];
})
.directive('OptionsTabs', ['$compile', '$templateCache', function($compile, $templateCache) {

    var linker = function(scope, element, attrs) {
        var html = $templateCache.get('OptionsTabsTempl.html');
        element.html(html);
        $compile(element.contents())(scope);
    }
    return {
        transclude: true,
        restrict: 'E',
        scope: true,
        controller: 'OptionsTabsCtrl',
        link: linker
    };
}])

还有html模板：

    <script type="text/ng-template" id="OptionsTabsTempl.html">
    <mg-content>
        <md-tabs md-dynamic-height md-stretch-tab>
            <md-tab ng-repeat="tab in tabs" label="{{tab.title}}">
                <div class="tab{{$index%4}}" style="padding: 25px; text-align: center;">
                    <div ng-bind-html="tab.content"></div>
                </div>
            </md-tab>
        </md-tabs>
    </mg-content>
</script>

为什么指令在DOM中呈现，但它根本不是什么？ 怎么强迫呢？ 我添加了＆＃39; ngSanitize＆＃39;，但它并没有让我感到高兴。