Angular bootstrap HTML processing of tab dynamic content

Question

I'm using Angular Bootstrap tabs. I'd like to use them with their content loaded from an Angular Model. However, all HTML in the content loaded fromt eh model is ignored. ie if I have

  $scope.tabs = [
    { title:'Dynamic Title 1', content:"<b>Dynamic</b> content 1" },
    { title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true }
  ];

The first tab's content is " content 1", not "Dynamic content 1" with "Dynamic" in bold. 内容1”，而不是加粗的“动态”的“动态内容1”。 If the content as statically supplied in the html file, it would show correctly.

Plunker to demonstrate the problem

Anyone know how I can force the html to be parsed properly?

Thank you, Greg

Answer 1

Based in the comments, you can create a function called:

scope.trustHtml = function(content){
    return $sce.trustAsHtml( content );
}

and then change your HTML to be like:

<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
    <span ng-bind-html="trustHtml(tab.content)"></span>
</tab>