Search code examples
javascriptcssangularjsng-style

CSS not dynamically updating in AngularJS

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

Solution

  • 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>