fix(progressbar): fix percentage calculation

- Fix percentage calculation when bars are altered

Closes #4471
Closes #4588
Fixes #4452

src/progressbar/progressbar.js

@@ -27,9 +27,8 @@ angular.module('ui.bootstrap.progressbar', [])
     });
 
     bar.recalculatePercentage = function() {
-      bar.percent = +(100 * bar.value / bar.max).toFixed(2);
-
       var totalPercentage = self.bars.reduce(function(total, bar) {
+        bar.percent = +(100 * bar.value / bar.max).toFixed(2);
         return total + bar.percent;
       }, 0);
 
@@ -46,6 +45,9 @@ angular.module('ui.bootstrap.progressbar', [])
 
   this.removeBar = function(bar) {
     this.bars.splice(this.bars.indexOf(bar), 1);
+    this.bars.forEach(function (bar) {
+      bar.recalculatePercentage();
+    });
   };
 
   $scope.$watch('max', function(max) {

src/progressbar/test/progressbar.spec.js

@@ -315,6 +315,29 @@ describe('progressbar directive', function() {
         }
         expect(totalWidth.toFixed(2)).toBe('100.00');
       });
+
+      it('should not have a total width over 37.65% when removing bar', function() {
+        $rootScope.objects = [
+          { value: 60, type: 'warning' },
+          { value: 103 },
+          { value: 270, type: 'info' }
+        ];
+        $rootScope.max = 433;
+        $rootScope.$digest();
+        var totalWidth = 0;
+        for (var i = 0; i < 3; i++) {
+          totalWidth += parseFloat(getBar(i).css('width'));
+        }
+        expect(totalWidth.toFixed(2)).toBe('100.00');
+
+        $rootScope.objects.splice(2, 1);
+        $rootScope.$digest();
+        totalWidth = 0;
+        for (i = 0; i < 2; i++) {
+          totalWidth += parseFloat(getBar(i).css('width'));
+        }
+        expect(totalWidth.toFixed(2)).toBe('37.65');
+      });
     });
   });
 });