I'm using ui-route for navigation.

I have father state called main, it's an abstract state (the url: /main) and child states products and users (urls: /main/products and /main/users).

app.config([$stateProvider, $urlRouterProvider,

  function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise(/main/products);

    $stateProvider

      .state(main, {

        url:/main,

        templateUrl: main.html,

        abstract: true,

        controller: MainCtrl,

      })

      .state(main.products, {

        templateUrl: products.html,

        controller: productsCtrl,

      })

      .state(main.users, {

        templateUrl: users.html,

        controller: usersCtrl,

      })

  }

]);

And here my controllers:

app.controller('MainCtrl', function($scope,$state) {

  console.log(I'm Main controller)



  $scope.goToProduct = function()

  {

    //$state.go(main.products,{})

    $state.go(main.products,{},{reload:true})

  }



  $scope.goToUsers = function()

  {

    //$state.go(main.users,{})

    $state.go(main.users,{},{reload:true})

  }



});



app.controller('usersCtrl', function() {

  console.log(I'm users controller)



});



app.controller('productsCtrl', function() {

  console.log(I'm products controller)

});

The HTML:

<ul>

  <li style=cursor:pointer  ng-click=goToProduct()>Click for products</li>

  <li style=cursor:pointer ng-click=goToUsers()>Click for users</li>

</ul>



<br>

<div style=font-size:28px ui-view></div>

As you can see, I'm using:
$state.go(main.products,{},{reload:true})
for navigation

When I'm clicking on users/products on the menu the MainCtrl reinitialize!!

It's because the {reload:true}.

My questions:

1) Why the father state controller also reinitialize on each click?

2) I need an elegant solution to avoid the MainCtrl to reinitialize!

Here is the complete example - plunker please look at the console.