Luís Ferreira Luís Ferreira - 26 days ago 12
AngularJS Question

HTML5 progress bar not showing value on Microsoft Edge using Angular JS

I have a problem in which I have a progress bar on a website with max set to 100 and the value set dynamically on page load. It works well on Firefox, Chrome and Safari but on Microsoft Edge the value is always interpreted as 0. My HTML code which is inside an

ng-repeat
is:

<progress max="100" value={{element.progress}}></progress>


element.progress
is always an integer value. When I check it on the Edge developer tools, I see the value is set to 0. Everything else works on the website, the values are all exhibited correctly. Just the progress tag does not work. If I use
document.getElementById
and set the value on the console it works.

Answer

Try use ng-value instead of value

<progress max="100" ng-value="element.progress"></progress>