Popover не работает с ng-bind-html

Question

Я пытаюсь динамически загружать всплывающие надписи на моем коде

$scope.setStatusMessage = function (message) {
    var lblClass = "", status = "" , template;
        lblClass = "label label-danger";
        status = "failed";
    template = '<label popover="' + message + '" popover-trigger="mouseenter" class="' + lblClass + '">' + status + '</label>';
    return $sce.trustAsHtml(template);
}

мой HTML был

<span data-ng-bind-html="setStatusMessage(statusMessage)"></span>

Проблема в HTML-коде работает, но pop over не работает. Могу ли я узнать проблему с исправлением.

Спасибо

ОБНОВЛЕНО

ОК, ребята, вот Плункер

Answer 1

Вот некоторые обходные пути: http://plnkr.co/edit/pferF3otkczQo9TJbKck?p=preview

directive('compileHtml', function($compile) {
        return {
          restrict: 'A',
          scope: {
            messageFn: '&',
            message: '='
          },
          link: function(scope, iElement, iAttrs) {
            scope.$watch('message', function(message) {
              var html = scope.messageFn({'message': message});
              iElement.html(html);
              $compile(iElement.contents())(scope);
            });
          }
        }
      });

На самом деле это похожий вопрос, как я сказал в комментариях. Поэтому вам нужно скомпилировать HTML еще раз после вставки HTML в тег.

Итак, я должен создать директиву compileHtml Вы должны передать функцию, которая возвращает очищенный HTML (message-fn в коде), а также предоставить параметры для этой функции (message в коде). Директива следит за изменениями message обновите HTML и перезапустите компиляцию.

ОБНОВИТЬ

Вот вилка твоя плнкр

По моему скромному мнению, лучше создать директиву, которая будет $watch поверх сообщения, очистите его без каких-либо внешних функций и перекомпилируйте.