AngularJS $interval function continues after route change

Question

I have a function inside a controller which is based on setInterval. I noticed that after first calling it, it worked fine but continued even after the route changed. Afterwards i tried using the native $interval service which would automatically track changes in scope. The problem however remains. So now i have two questions. The first one is what can i do so that i use a repeated function inside a specific controller that stops when the user leaves that route? Also why does the scope function continue since i've changed scopes?

UPDATE - Code is like this

$scope.refreshScore() {         ....       } $scope.refreshMe = function(){   $interval($scope.refreshScore, 10000); } 

Answer 1

Maybe try canceling it on the destroy event of the scope.

$scope.refreshScore() {    .... } var intervalPromise; $scope.refreshMe = function(){     intervalPromise = $interval($scope.refreshScore, 10000); } $scope.$on('$destroy',function(){     if(intervalPromise)         $interval.cancel(promiseFromInterval);    }); 

$interval may not be the best solution for this, especially if it is some async operation. If you absolutely have to have some timed operation that you want to occur preciously every x ms I would use something like this:

var refreshingPromise;  var isRefreshing = false; $scope.startRefreshing = function(){    if(isRefreshing) return;    isRefreshing = true;    (function refreshEvery(){          //Do refresh          //If async in then in callback do...          refreshingPromise = $timeout(refreshEvery,10000)     }()); }  

Then do the same thing as above

If you're having trouble canceling the refresh you might try subscribing to some sort of route change event. And doing it there.