How does the "main" controller access $routeParams in this example?

Question

I'm experimenting with $routeParams, by following along with this example in the AngularJS documentation. For reference, here is the script itself:

 angular.module('ngRouteExample', ['ngRoute'])

   .controller('MainController', function($scope, $route, $routeParams, $location) {
       $scope.$route = $route;
       $scope.$location = $location;
       $scope.$routeParams = $routeParams;
   })

   .controller('BookController', function($scope, $routeParams) {
       $scope.name = "BookController";
       $scope.params = $routeParams;
   })

   .controller('ChapterController', function($scope, $routeParams) {
       $scope.name = "ChapterController";
       $scope.params = $routeParams;
   })

  .config(function($routeProvider, $locationProvider) {
    $routeProvider
     .when('/Book/:bookId', {
      templateUrl: 'book.html',
      controller: 'BookController',
      resolve: {
        // I will cause a 1 second delay
        delay: function($q, $timeout) {
          var delay = $q.defer();
          $timeout(delay.resolve, 1000);
          return delay.promise;
        }
      }
    })
    .when('/Book/:bookId/ch/:chapterId', {
      templateUrl: 'chapter.html',
      controller: 'ChapterController'
    });

    // configure html5 to get links working on jsfiddle
    $locationProvider.html5Mode(true);
  });

What I can't understand is this: how does MainController get the updated $routeParam object? I can see that as I click, items that MainController is responsible for setting are changing, but I don't understand how. It's making it a little tough to reproduce this behavior.

Answer 1

It doesn't get re-instantiated, and it's not "getting" the updated $routeParams object - the object in the controller is the routeParams object. It is the same object that is in the other controllers, not a "copy" of it.

So when the $routeParams object gets changed, the other controller already has the changes.