如何将html字符串与ng-bind和ng-repeat绑定到表元素

Question

我是AngularJS的新手。我有一个HTML字符串，我需要绑定到一个表元素，但我在绑定期间得到一个不同的结果。

请找到我的代码here的jsFiddle图片。

HTML

<div ng-app ng-controller="MyCtrl">
    <table>
        <td>ABC</td>
        <td>XYZ</td>
        <!-- Direct bind using span-->
        <span><tr><td>Akshay</td></tr><tr><td>Jain</td></tr></span>
        <span><tr><td>Bangalore</td></tr></span>
        <!-- Bind using ng-bind-html-->
        <span ng-repeat="opt in opts" ng-bind-html="opt.text"></span>
    </table>
</div>

的JavaScript

function MyCtrl($scope, $sce) {

    $scope.opts = [
        {
            value: 222,
            text: '<tr><td><i>Akshay</i></td></tr><tr><td>Jain</td></tr><tr><td>Bangalore</td></tr>'
        }
    ];

    $scope.opts[0].text = $sce.trustAsHtml($scope.opts[0].text);

}

输出

AkshayJainBangalore
ABC XYZ
Akshay
Jain
Bangalore

如果你可以看到，当我尝试直接在HTML中绘制值时，我的代码是不同的，而不同的母鸡我使用ng-bind。请帮我知道我哪里出错了。