Angular $state.go {reload: true} shouldn't rei

Question

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.

Answer 1

1. Update your ui-router to newer version (0.2.14 at least)
2. Change $state.go call to something like this $state.go("main.users",{},{reload: "main.users"})

Since ui-router 0.2.14 you can pass string as reload value - ui router will refresh state that matches to passed string and all its children.

Answer 2

the reload: true option will reload current and parent states (basically from your current state to the highest level state). However, if you specify reload option with state name. it only reload the state that you put in and its all children state. This is straight from the doc