Progress bar working in all browser except IE (Angular + bootstrap)

Question

I am using Angular and bootstrap to show a progress bar. here is the html

<div class="progress progress-striped  active ">
    <div class="bar bar-info" style="width:{{score}}%"></div>
</div>

score is coming from my controller. This code works in all the browser except IE.

Any help will be appreciated.

Answer 1

Just change to the following:

<div class="progress progress-striped  active ">
    <div class="bar bar-info" ng-attr-style="width:{{score}}%;"></div>
</div>

When you want to use Angular interpolation in an HTML attribute like style you need to use the ng-attr- prefix for that attribute for it to place nice in the browser.

Answer 2

If your "score" is getting the value properly then apply the style little differently, The code below worked for me:

Change your style attribute to ng-style="width={width:'{{ score}}%'}"

<div class="progress progress-striped  active ">
    <div class="bar bar-info" ng-style="width={width:'{{ score}}%'}"></div>
</div>