angular.ui.progressbar component - $watch max attribute

src/progressbar/progressbar.js

@@ -10,7 +10,21 @@ angular.module('ui.bootstrap.progressbar', [])
         animate = angular.isDefined($attrs.animate) ? $scope.$parent.$eval($attrs.animate) : progressConfig.animate;
 
     this.bars = [];
-    $scope.max = angular.isDefined($attrs.max) ? $scope.$parent.$eval($attrs.max) : progressConfig.max;
+
+    this.updateBar = function(bar) {
+        bar.percent = +(100 * bar.value / $scope.max).toFixed(2);
+    };
+
+    if (angular.isDefined($attrs.max)) {
+        $scope.$parent.$watch($attrs.max, function (new_value) {
+            $scope.max = new_value;
+            for (i=0; i<self.bars.length; i++) {
+                self.updateBar(self.bars[i]);
+            }
+        });
+    } else {
+        $scope.max = progressConfig.max;
+    }
 
     this.addBar = function(bar, element) {
         if ( !animate ) {
@@ -20,7 +34,8 @@ angular.module('ui.bootstrap.progressbar', [])
         this.bars.push(bar);
 
         bar.$watch('value', function( value ) {
-            bar.percent = +(100 * value / $scope.max).toFixed(2);
+            bar.value = value;
+            self.updateBar(bar);
         });
 
         bar.$on('$destroy', function() {

src/progressbar/test/progressbar.spec.js

@@ -5,8 +5,9 @@ describe('progressbar directive', function () {
   beforeEach(inject(function(_$compile_, _$rootScope_) {
     $compile = _$compile_;
     $rootScope = _$rootScope_;
+    $rootScope.max   = 100;
     $rootScope.value = 22;
-    element = $compile('<progressbar animate="false" value="value">{{value}} %</progressbar>')($rootScope);
+    element = $compile('<progressbar animate="false" value="value" max="max">{{value}} %</progressbar>')($rootScope);
     $rootScope.$digest();
   }));
 
@@ -65,6 +66,19 @@ describe('progressbar directive', function () {
       expect(bar.attr('aria-valuetext')).toBe('60%');
     });
 
+  it('adjusts the "bar" width and aria when max value changes', function() {
+      $rootScope.max = 200;
+      $rootScope.$digest();
+
+      var bar = getBar(0);
+      expect(bar.css('width')).toBe('11%');
+
+      expect(bar.attr('aria-valuemin')).toBe('0');
+      expect(bar.attr('aria-valuemax')).toBe('200');
+      expect(bar.attr('aria-valuenow')).toBe('22');
+      expect(bar.attr('aria-valuetext')).toBe('11%');
+    });
+
   it('allows fractional "bar" width values, rounded to two places', function () {
     $rootScope.value = 5.625;
     $rootScope.$digest();