angular嵌套拼接html,Angular.js在ng-bind-html中嵌套花括号

我正在使用JavaScript和Angular.js创建一个拼写应用程序。当用户拼写正确的单词时，视图应该说＆＃34; Word已经完成！＆＃34;，当用户还没有完成他们的单词时，视图应该显示朋友列表。

因此，我需要从我的JS脚本中更改对象的innerHTML(以便在用户正确拼写单词时更新)。

这是我用来决定两个innerHTML之间的if语句：

if(wordCompletedVar) {

$scope.friendsHTML = "

Word already completed! ";

} else {

$scope.friendsHTML = "

{{friend}}

";

}

在我的HTML文档中，我试图使用ng-bind-html注入friendsHTML：

它适用于简单的句子，但是使用更复杂的HTML(使用嵌套的Angular.js花括号{{}})，括号显示而不是角度对象(即{{friends}})。当我使用没有to_trusted函数的ng-bind-html时也发生了同样的情况。

这是我正在尝试(并且失败)注入的HTML的更清晰的视图：

{{friend}}

我使用的to_trusted函数是：

$scope.to_trusted = function(html_code) {

return $sce.trustAsHtml(html_code);

};

(我在控制器中包含$ sce)。

如何在ng-bind-html注入中嵌套花括号角度表示法？我已经在花括号或ng-bind-html上找到了很多文档，但我还没有看到如何将它们一起使用(或者如何以不同的方式完成我想要完成的任务) - 我愿意接受建议！)