How to watch for a route change in AngularJS?

How would one watch/trigger an event on a route change?

Note: This is a proper answer for a legacy version of AngularJS. See this question for updated versions.

$scope.$on('$routeChangeStart', function($event, next, current) { 
   // ... you could trigger something here ...
 });

The following events are also available (their callback functions take different arguments):

• $routeChangeSuccess
• $routeChangeError
• $routeUpdate - if reloadOnSearch property has been set to false

See the $route docs.

There are two other undocumented events:

• $locationChangeStart
• $locationChangeSuccess

See https://stackoverflow.com/questions/15006849/angularjs-whats-the-difference-between-locationchangesuccess-and-locationch

If you don't want to place the watch inside a specific controller, you can add the watch for the whole aplication in Angular app run()

var myApp = angular.module('myApp', []);

myApp.run(function($rootScope) {
    $rootScope.$on("$locationChangeStart", function(event, next, current) { 
        // handle route changes     
    });
});

$rootScope.$on( "$routeChangeStart", function(event, next, current) {
  //..do something
  //event.stopPropagation();  //if you don't want event to bubble up 
});

$rootScope.$on( "$routeChangeStart", function(event, next, current) {
  //if you want to interrupt going to another location.
  event.preventDefault();  });

For some reason the suggested solutions did not work for me using $routeChangeStart event

If you run into the same problem, try:

$scope.$on('$stateChangeStart', function(evt, toState, toParams, fromState, fromParams) { 
   // ... you could trigger something here ...
 });

In my configuration I'm using @ui-router/angularjs (a.k.a angular-ui-router) from node package manager (a.k.a npm)

This is for the total beginner... like me:

HTML: