在异步加载的模板上使用angular-translate

Question

我在应用上使用angular-translate。它使用可以在angular-ui的帮助下动态切换其内容的选项卡，我通过使用$ http的自定义服务获取内容。

然后对模板进行清理并将其推入数组以供以后渲染：

 var addNewTab = function(template, tabClass) {
   var id = $scope.tabs.length + 1;
   tabClass = tabClass || '';
   template = $sce.trustAsHtml(template);
   template = $compile(template)($scope);

   $scope.tabs.push({
     id: id,
     name: 'PLACEHOLDER TITLE',
     active: true,
     content: template,
     tabClass: tabClass
   });
 };

在视图中使用{{tab.content}}进行渲染，到目前为止所做的一切都运行良好，我遇到的问题是使用angular-translate来翻译新插入的模板。

在模板中我使用translate指令来翻译事物，但由于模板在翻译发生的任何地方的范围之外，因此其文本不会被渲染。

我以为我可以使用$ compile来使用它但是我不太明白如何使用它。

非常感谢任何想法。