$scope.$on('$viewContentLoaded',.. called twice and more times

Issue

For example, I have such simple snippet:

var sampleApp = angular.module('sampleApp', []);
sampleApp.config(['$routeProvider',
  function($routeProvider, $rootScope) {
    $routeProvider.
      when('/AddNewOrder', {
    templateUrl: 'add_order.html',
    controller: 'AddOrderController'
      }).
      when('/ShowOrders', {
    templateUrl: 'show_orders.html',
    controller: 'ShowOrdersController'
      }).
      otherwise({
    redirectTo: '/AddNewOrder'
      });
}]);

sampleApp.controller('AddOrderController', function($scope, $rootScope) {
    $scope.message = 'This is Add new order screen';

    $scope.$on('$viewContentLoaded', function (event, toState, toParams, fromState, fromParams) {
        console.log("Add new order");
    });
    
});

sampleApp.controller('ShowOrdersController', function($scope,$rootScope) {
    $scope.message = 'This is Show orders screen';

    $scope.$on('$viewContentLoaded', function (event, toState, toParams, fromState, fromParams) {
        console.log("Show orders");
    });
});

It is app.js from ng example, and in browsers it example looks so:

Full version you can see here: http://plnkr.co/edit/jc3nFBAaBLMiGMYV4TZW?p=preview

Where is some strange:

$scope.$on('$viewContentLoaded', function (event, toState, toParams, fromState, fromParams) {
        console.log("Add new order");

and

$scope.$on('$viewContentLoaded', function (event, toState, toParams, fromState, fromParams) {
            console.log("Show orders");
        });

called twice on every click upon links. Also I tried to use $routeChangeSuccess,but the result is the same. Why does this happen? And what needs to do to get a single call of $scope.$on(..)?

Solution

Change your href="#AddNewOrder" to href="#/AddNewOrder". Because of that your controller initialized two times.

Answered By - Ebin Manuval