Popover not working with ng-bind-html

Question

I'm trying to dynamically load pop over on lable my code was

$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);
}

my html was

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

problem is html code is working but popover not working. may i know the problem with fix.

thanks

UPDATED

OK guys here is the Plunker

Similar question http://stackoverflow.com/questions/20623118/rendering-directives-within-sce-trustashtml — Ruben Nagoga, Oct 22 '14 at 08:19
@GayanRanasinghe Are you doing this inside a controller? Can you shed more lights on when you are doing this? How dynamic you need it? — PSL, Oct 23 '14 at 02:51
Is there a specific reason for why you don't add `label` directly in your HTML instead of using `$sce`? i.e. `{{item.message}}` — idursun, Oct 23 '14 at 07:33
To be honestly this exame isn't the use on my actual code it much complex than this. I just focused on the pop over not showing issue!! — Gayan, Oct 23 '14 at 07:35

score 0 · Accepted Answer · edited May 23 '17 at 12:20

Here is some workaround: 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);
            });
          }
        }
      });

Actually it is similiar question, as I said in comments. So you need to compile HTML one more time after inserting HTML into tag.

So I have create directive compileHtml you should pass function which returns sanitized HTML (message-fn in code) and also provide params for that function (message in code). Directive watch for changes of message update HTML and re-run compile.

UPDATE

Here is fork of your plnkr

In my humble opinion, it is better to create directive which will $watch over message, sanitize it without any external function and re-compile.

You can compile on controller, but it is not good practice to $watch and work with HTML element in controller. — Ruben Nagoga, Oct 23 '14 at 08:37
OK that'll be acceptable with few changes message attribute actually not need. we can have it without it. here is the updated one. http://plnkr.co/edit/Y3z4ce5s8YorADjgS2mx?p=preview — Gayan, Oct 23 '14 at 08:56

Popover not working with ng-bind-html

UPDATED

1 Answers1