Using the HTML 5 progress control in Angular.js–IE 11 troubles

A colleague is building his own file upload control using Angular.js. He already got quite far thanks to the power of HTML 5 and Angular.js. As he wanted to show some feedback to the user during the upload process, he integrated the HTML5 progress control. This control works perfect together with Angular.js… unless you are using IE 11.

Here is the original code(does'nt work in IE 11):

	<div ng-app="app">
	<div ng-controller="ctrl">
	<progress value="{{uploadPercentageCompleted}}" max="100"></progress>
	</div>
	</div>

view raw progress.html hosted with ❤ by GitHub

	var app = angular.module('app', []);
	app.controller('ctrl', function($scope,$interval){
	$interval(function(){
	$scope.uploadPercentageCompleted=$scope.uploadPercentageCompleted+10;
	},1000);
	});

view raw progress.js hosted with ❤ by GitHub

And here is how we got it working using ‘ng-attr-value’:

	<div ng-app="app">
	<div ng-controller="ctrl">
	<progress ng-attr-value="{{uploadPercentageCompleted}}" max="100"></progress>
	</div>
	</div>

view raw progress.html hosted with ❤ by GitHub

	var app = angular.module('app', []);
	app.controller('ctrl', function($scope,$interval){
	$interval(function(){
	$scope.uploadPercentageCompleted=$scope.uploadPercentageCompleted+10;
	},1000);
	});

view raw progress.js hosted with ❤ by GitHub