Почему не парсятся директивы в ng-bind-html?

Question

[HAbRAhabp]

Код на JSFIDDLE
Почему то не работают Angular директивы, которые достаются из переменной. В первой вкладке должен отображаться прелуадер, а его нет. Как можно сделать чтобы это работало? По идее шаблон должен доставаться посредством GET запроса к файлу.

Answer 1

[Алексей Немиро]

angular-bind-html-compile

(function (angular) {
    'use strict';

    var module = angular.module('angular-bind-html-compile', []);

    module.directive('bindHtmlCompile', ['$compile', function ($compile) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.$watch(function () {
                    return scope.$eval(attrs.bindHtmlCompile);
                }, function (value) {
                    // In case value is a TrustedValueHolderType, sometimes it
                    // needs to be explicitly called into a string in order to
                    // get the HTML string.
                    element.html(value && value.toString());
                    // If scope is provided use it, otherwise use parent scope
                    var compileScope = scope;
                    if (attrs.bindHtmlScope) {
                        compileScope = scope.$eval(attrs.bindHtmlScope);
                    }
                    $compile(element.contents())(compileScope);
                });
            }
        };
    }]);
}(window.angular));

Использование:

var app = angular.module('myApp',['ngMaterial', 'ngSanitize', 'angular-bind-html-compile']);
app.controller("My", ['$scope', '$http', function ($scope, $http) {
  $scope.banner = '<md-progress-circular md-diameter="96"></md-progress-circular>'
}]);

bind-html-compile вместо ng-bind-html.

Посмотреть