angularjs - How to stop $interval on leaving ui-state? -

angular, ui-router. using $interval in controller of state so:

$scope.timer = null;  $scope.starttimer = function () {      $scope.timer = $interval($scope.foo, 30000); };  $scope.stoptimer = function () {     if (angular.isdefined($scope.timer)) {         $interval.cancel($scope.timer);     } }; 

the problem? timer persists upon leaving state. understanding $scope , controller "destroyed" when state left. so, based on that, timer should stop (within controller, cancelling timer when moving around, works - persists if navigate diff state). misunderstanding here?

i guess since interval , timeout services in angular, available everywhere, still don't understand how see functions in not-initialized controller, unless it's copied. solution use regular good-old js interval?

clear interval on $destroy

like

$scope.$on("$destroy",function(){     if (angular.isdefined($scope.timer)) {         $interval.cancel($scope.timer);     } });