Javascript 将作用域变量传递给popover模板angularjs

我有一个表，每一行都有一个popover悬停，在每一行上，popover内容应该有不同的内容。我制作了一个popover模板，如下所示：

<tr ng-repeat="x in myData">
    <td>{{ x.id  }}</td>
   <td>
       <script type="text/ng-template" id="templateId.html">
         This is the content of the template: {{ x.id  }}
        </script>
        <a href="#"> <span class="glyphicon custom-glyph glyphicon-zoom-in" mypopover data-placement="right" ></span> </a>
   </td>             
</tr>

但是当我查看浏览器时，输出是：

这是模板的内容：{{x.id}

---

{{x.id}}

正在

标记内进行解释？我也是angularjs的新手。

为什么不直接使用“uib popover html”结构指令而不是您制作的“mypopover”

下载并声明依赖项“uib引导”

然后templateId.html将知道变量x

---

这是文档

为什么不使用“uib popover html”结构指令而不是您制作的“mypopover”

下载并声明依赖项“uib引导”

然后templateId.html将知道变量x

这是医生

app.directive('mypopover', function ($compile,$templateCache) {
return {
    restrict: "A",
    link: function (scope, element, attrs) {
        var popOverContent = $templateCache.get("templateId.html");
        var options = {
            content: popOverContent,
            placement: "right",
            html: true,
                        trigger: 'hover'
        };
        $(element).popover(options);
    }
};
});