The progress bar works in all browsers except IE (Angular + bootstrap)

Question

I use 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 comes from my controller. This code works in all browsers except IE.

Any help would be appreciated.

Answer 1

Just go to the following:

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

If you want to use Angular interpolation in an HTML attribute such as a style, you need to use the ng-attr- for this attribute so that it can be ng-attr- in the browser.

Answer 2

If your “score” gets the value correctly, apply the style a 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> 

Answer 3

Detected workaround from theDemi post . You should write your own directive as follows:

 angular.module('myApp').directive('myProgress', function() { return function(scope, element, attrs) { scope.$watch(attrs.myProgress, function(val) { element.html('<div class="bar" style="width: ' + val + '%"></div>'); }); } }); 

using:

  <div class="progress" my-progress="nameOfYourProgressModelVariable"></div>