why $routeChangeSuccess never gets called?


I am doing something similar to below on my app but I am just not able to get the routeChangeSuccess event.

var myapp = angular.module('myapp', ["ui.router", "ngRoute"]);

  function($rootScope, $scope, $location, $route) {
    $scope.menus = [{ 'name': 'Home ', 'link': '#/home'}, {'name': 'services', 'link': '#/services'} ]

    $scope.$on('$routeChangeSuccess', function(event, current) {

      alert('route changed');


  function($stateProvider, $urlRouterProvider, $routeProvider) {
      .state('home', {
        url: "/home",
        //template: '<h1>Home Screen</h1>'
        templateUrl: "/Client/Views/Home/Home.htm"
      .state('services', {
        url: "/services",
        //template: '<h1>Service screen</h1>'
        templateUrl: "/Client/Views/Home/service.htm"


a very simple html as below also fails

  <body ng-controller="home.RootController">

    <ul class="nav">
      <li ng-repeat="menu in menus" "="">
        <a href="{{menu.link}}">{{menu.name}}</a>
    <div ui-view> No data yet!</div>

but when i click on the link i see that the views are getting updated but the $routeChangeSucces event is never triggered.

is there something i am missing?

Another question I had was is there an event that I can hook on to to know the view is ready so I can start some additional processing, like document.ready().

plnlr but not fully working…



Please, check this wiki: State Change Events. An extract:

  • $stateChangeSuccess – fired once the state transition is complete.

    function(event, toState, toParams, fromState, fromParams){ … })

So instead of the $routeChangeSuccess use the $stateChangeSuccess.

To get more detailed information about all available events, check the wiki Events. Here you can find that the suitable for you, could be event $viewContentLoaded

Answered By – Radim Köhler

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.