CSS не обновляется динамически в AngularJS

Question

Я пытаюсь сделать 2 div с их шириной, установленной значением angularJS (0 - 100), поэтому я сделал это:

<span class="green" ng-style="{width: '{{videoRating}}%'}"</span>
<span class="red" ng-style="{width: '{{100-videoRating}}%'}"></span>

но ширина рассчитывается по начальному значению videoRating. Когда я изменяю это значение, стиль не обновляется.

Любые предложения о том, как это сделать?

Я пытался добавить ng-cloak а также $scope.$apply() но не повезло

Answer 1

Нг -стиль не должен использовать {{}} Директива интерполяции, вы можете использовать прямые переменные области видимости.

наценка

<span class="green" ng-style="{width: videoRating + '%'}"</span>
<span class="red" ng-style="{width: (100 - videoRating) + '%'}"></span>