"Value" of progress element does not bind in IE11

[omarmeky]

If I do something like:

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

It displays correctly on browsers besides IE11 (haven't tested older versions of IE). On IE11, it always evaluates to "0"

I am using my own directive to bypass this issue:

<progress max="100" progress-bar-value="progress"></progress>

.directive('progressBarValue', ['$parse', function($parse) {
            return {
                restrict: 'A',
                link: function(scope, elem, attrs) {
                    scope.$watch(attrs.progressBarValue, function() {
                        elem.attr('value', $parse(attrs.progressBarValue)(scope));
                    });
                }
             };
         }]);

[langdonx]

Funny, I was just dealing with something similar myself. It seems like standard attributes with interpolation have issues in IE11.

Your issue in a Fiddle: http://jsfiddle.net/langdonx/6qcs6yee/

Related issue I filed a moment ago: #12324

ETA: In your case you can use ng-attr-value, via:

• html5 progress tag in IE11 does not recognize "value" attribute when bound #7218

[Narretz]

There's also ngValue, which should work for this use-case, too.

[Narretz]

Closing as dupe of #7218