html progress bar not updating with angularjs

Question

I'm trying to setup a progress bar and update it's progress with angular like this

<progressbar value="{{data.progress}}"></progressbar>

The controller code :

myApp.controller( "MainCtrl", [ "$scope", "$timeout", function($scope, $timeout) {
    $scope.data = { progress : 0 };
    (function progress(){
        if($scope.data.progress < 100){
            $timeout(function(){
                $scope.data.progress += 1;
                progress();
            },200);
        }
    })();
}]);

The bar is not updating while the data.progress variable is. It's not even showing ! What's wrong with that design ?

http://jsfiddle.net/1ptm607v/2/

dfsq · Accepted Answer · 2014-11-07 14:13:10Z

2

You should provide an expression to progressbar directive:

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

With {{}} Angular evaluates the expression, but this is not what you need.

By the way, there also was an error in console about it, so keep developer tools open all the time for simpler debugging.

Demo: http://jsfiddle.net/1ptm607v/3/

edited Nov 7, 2014 at 14:13

answered Nov 7, 2014 at 14:06

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arno 2501 Over a year ago

Thank you though what I meant to ask with the question (which was incorrect I should have used <progress> instead of <progressbar>) was why html element progress not progressbar (which is angular) does not support that kind of design.

dfsq Over a year ago

Not sure I understand the question, but actually HTML5 progress element does support something like this. Take a look at quick demo: jsfiddle.net/0ykok3m6

Floern · Accepted Answer · 2016-04-07 22:52:14Z

-1

progress-value is another way to do it:

<span class="progress-value">{{data.progress}}%</span>

edited Apr 7, 2016 at 22:52

Floern

34k24 gold badges106 silver badges122 bronze badges

answered Apr 7, 2016 at 13:14

Riddhi Gohil

1,80819 silver badges18 bronze badges

Collectives™ on Stack Overflow

html progress bar not updating with angularjs

2 Answers 2

Demo: http://jsfiddle.net/1ptm607v/3/

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Demo: http://jsfiddle.net/1ptm607v/3/

2 Comments

Comments

Related