Progress bar working in all browser except IE (Angular + bootstrap)
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.
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>
Found the workaround from theDemi post. You have to 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>'); }); }});usage:
<div class="progress" my-progress="nameOfYourProgressModelVariable"></div>