Angular模板变量仅适用于悬停

Question

在我的模板中，我有以下内容：

<small class="badge">
    {{reservationsCount}}
</small>

承诺会返回

{{reservationsCount}}，但不会呈现，除非：

• 我将鼠标悬停在元素上
• 我给出z-index为1的相对位置：

<small class="badge" style="position:relative; z-index:1;">
    {{reservationsCount}}
</small>

为什么会这样？必须有一个更好的解决方案。

更新：这也不起作用..

<small class="badge" ng-bind-template="{{reservationsCount}}"></small>

但是，如果我引入文字字符， 工作：

<small class="badge" ng-bind-template="foo {{reservationsCount}}"></small>

:: confused face :: Whaaaaat？

更新：JS获取计数

$scope.reservations = reservations.get({
    future: '1'
}).then(function (res) {
   $scope.reservations = res;
   $scope.reservationsCount = res.count;
});