Progress Bar doesn't work after changing route on AngularJS

Question

I'm new in AngularJS world and I have so many problems when I want to use a progress bar in my App.

I'm developing a quiz which has a "progress bar" with a countdown for every question, but when I change route (when I go ahead with other question) the progressbar doesn't work anymore, only on the first question. I spent so many hours searching for a solution and I don't make it work yet. :(

I read that I had to use directives to manipulate DOM (because with I need to change value and max attributes) but I'm not able to refresh the template... Also I used this ProgressBar ( http://kimmobrunfeldt.github.io/progressbar.js/ ) but I have the same problem.

Anyone would know to help me?

Regards, Enrique.

EDIT: This is the code:

(html)

<ion-view title="Test" hide-back-button="true" >
   <ion-content class="padding" scroll="false">
  ..
    <progress id="progressbar" value="20" max="100"></progress>
  ..
   </ion-content>
</ion-view>

(controller)

var bar = document.getElementById('progressbar');
var loadCountdown = function() {
            $interval(function() {
                    bar.value = bar.value + 10;
            }, 1000, 15);
    }

On the first view It's works perfectly, but then it doesn't.

Answer 1

使用https://github.com/angular-ui/ui-router ，它使您有机会使用嵌套视图并共享父范围。