CSS not dynamically updating in AngularJS

Question

I'm trying to make 2 div's with their width set by an angularJS value (0 - 100) so I did this:

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

but the width is calculated on the initial value of videoRating. When I change that value, it won't update the style.

Any suggestions on how to do this?

I tried adding ng-cloak and $scope.$apply() but no luck

Answer 1

ng-style should not use {{}} interpolation directive, you could use direct scope variables there.

Markup

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