fix(progressbar): user percent attribute instead of value.

Closes #535. Problem with IE10.

BREAKING CHANGE: The 'value' is replaced by 'percent'.

  Before:

  <progress value="..."></progress>

  After:

  <progress percent="..."></progress>

src/progressbar/docs/demo.html

@@ -1,27 +1,27 @@
 <div ng-controller="ProgressDemoCtrl" class="well">
     <h2>Static</h2>
     <div class="row-fluid">
-        <div class="span4"><progress value="55"></progress></div>
-        <div class="span4"><progress value="22" class="progress-warning progress-striped"></progress></div>
-        <div class="span4"><progress value="88" class="progress-danger progress-striped active"></div>
+        <div class="span4"><progress percent="55"></progress></div>
+        <div class="span4"><progress percent="22" class="progress-warning progress-striped"></progress></div>
+        <div class="span4"><progress percent="88" class="progress-danger progress-striped active"></div>
     </div>
 
     <h2>Dynamic <button class="btn btn-primary" type="button" ng-click="random()">Randomize</button></h2>
     <pre>Value: {{dynamic}}</pre>
-    <progress value="dynamic"></progress>
+    <progress percent="dynamic"></progress>
 
     <small><em>No animation</em></small>
-    <progress value="dynamic" class="progress-success" animate="false"></progress>
+    <progress percent="dynamic" class="progress-success" animate="false"></progress>
 
     <small><em>Object (changes type based on value)</em></small>
-    <progress value="dynamicObject" class="progress-striped active"></progress>
+    <progress percent="dynamicObject" class="progress-striped active"></progress>
 
     <h2>Stacked <button class="btn btn-primary" type="button" ng-click="randomStacked()">Randomize</button></h2>
     <small><em>Array values with automatic types</em></small>
     <pre>Value: {{stackedArray}}</pre>
-    <progress value="stackedArray" auto-type="true"></progress>
+    <progress percent="stackedArray" auto-type="true"></progress>
 
     <small><em>Objects</em></small>
     <pre>Value: {{stacked}}</pre>
-    <progress value="stacked"></progress>
+    <progress percent="stacked"></progress>
 </div>

src/progressbar/progressbar.js

@@ -49,7 +49,7 @@ angular.module('ui.bootstrap.progressbar', ['ui.bootstrap.transition'])
         replace: true,
         controller: 'ProgressBarController',
         scope: {
-            value: '=',
+            value: '=percent',
             onFull: '&',
             onEmpty: '&'
         },

src/progressbar/test/progressbar.spec.js

@@ -5,7 +5,7 @@ describe('progressbar directive with no binding', function () {
   beforeEach(inject(function(_$compile_, _$rootScope_) {
     $compile = _$compile_;
     $rootScope = _$rootScope_;
-    element = $compile('<progress value="22" animate="false"></progress>')($rootScope);
+    element = $compile('<progress percent="22" animate="false"></progress>')($rootScope);
     $rootScope.$digest();
   }));
 
@@ -31,7 +31,7 @@ describe('progressbar directive with data-binding', function () {
     $compile = _$compile_;
     $rootScope = _$rootScope_;
     $rootScope.percent = 33;
-    element = $compile('<progress value="percent" animate="false"></progress>')($rootScope);
+    element = $compile('<progress percent="percent" animate="false"></progress>')($rootScope);
     $rootScope.$digest();
   }));
 
@@ -90,7 +90,7 @@ describe('stacked progressbar directive', function () {
     $compile = _$compile_;
     $rootScope = _$rootScope_;
     $rootScope.stacked = [12, 22, 33];
-    element = $compile('<progress value="stacked" animate="false"></progress>')($rootScope);
+    element = $compile('<progress percent="stacked" animate="false"></progress>')($rootScope);
     $rootScope.$digest();
   }));
 
@@ -205,7 +205,7 @@ describe('stacked progressbar directive handlers', function () {
     $rootScope.stacked = [20, 30, 40]; // total: 90
     $rootScope.fullHandler = jasmine.createSpy('fullHandler');
     $rootScope.emptyHandler = jasmine.createSpy('emptyHandler');
-    element = $compile('<progress value="stacked" on-full="fullHandler()" on-empty="emptyHandler()" animate="false"></progress>')($rootScope);
+    element = $compile('<progress percent="stacked" on-full="fullHandler()" on-empty="emptyHandler()" animate="false"></progress>')($rootScope);
     $rootScope.$digest();
   }));
 
@@ -242,7 +242,7 @@ describe('stacked progressbar directive with auto-types', function () {
     $compile = _$compile_;
     $rootScope = _$rootScope_;
     $rootScope.stacked = [12, 22, {value: 33}, {value: 5}, 11];
-    element = $compile('<progress value="stacked" animate="false" auto-type="true"></progress>')($rootScope);
+    element = $compile('<progress percent="stacked" animate="false" auto-type="true"></progress>')($rootScope);
     $rootScope.$digest();
 
     angular.extend(config, progressConfig);
@@ -311,7 +311,7 @@ describe('stacked progressbar directive with auto-types', function () {
   });
 
   it('can bypass default configuration for stacked classes from attribute', function() {
-    element = $compile('<progress value="stacked" stacked-types="\'danger\', \'warning\', \'success\'" auto-type="true" animate="false"></progress>')($rootScope);
+    element = $compile('<progress percent="stacked" stacked-types="\'danger\', \'warning\', \'success\'" auto-type="true" animate="false"></progress>')($rootScope);
     $rootScope.$digest();
 
     var stackedTypes = config.stackedTypes;