In angular, how to use cancel an $interval on user events, like page change?

Whenever the user changes the page, the scope associated with the controller of the route (/page1 in the example below) will be sent a $destroy event. You can cancel that $interval in a listener to that event:

app.config(function ($routeProvider) {
     $routeProvider.when('/page1', {
          template: '<div>Page Content</div>',
          controller: PageController
      });
     // ...
});

function PageController($scope, $interval) {
    var intervalPromise = $interval(function () { /* ... */ }, 5000);      
    $scope.$on('$destroy', function () { $interval.cancel(intervalPromise); });
}