在Angular UI中將動態HTML顯示爲選項卡內容

Question

In this plunk我有一個需要動態生成HTML內容的Angular UI選項卡。不過，標籤內容顯示的卻是HTML標記。如何解決這個問題？

HTML

<uib-tabset> 
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}"> 
     {{tab.content}} 
    </uib-tab> 
</uib-tabset> 

的Javascript

var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']); 

app.controller('ctl', function ($scope) { 

    $scope.tabs = [ 
        { title:'title 1', content:'<div id="id1">111</div>' }, 
        { title:'title 2', content:'<div id="id2">222</div>' } 
        ]; 
}); 

Answer 1

使用<div ng-bind-html="tab.content"></div>：

<uib-tabset> 
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}"> 
     <div ng-bind-html="tab.content"></div> 
    </uib-tab> 
    </uib-tabset>