AngularJS ui-router: reload:true also reloads parent state

Question

In this plunk you have two ui-router states, a parent and a child. When the child is invoked by clicking on the link, since it has the option reload: true it is

Answer 1

A changing parameter as Mathew Foscarini suggested, is (for sure) way to go. There could be also another solution, technique with state reloader. Below, and in this updated plunker we can see simplified version, but we can even pass some params there to make it more general

.state('state1.reloader', {
      controller: function($state) {
        $state.go('state1.state11')
      }
})

And we can call it like:

// instead of this
<a href="#" ui-sref="state1.state11" ui-sref-opts="{reload: true}">
// we can do this
<a href="#" ui-sref="state1.reloader" >

Check it here

Answer 2

It's actually very simple.

Don't use reload because that does exactly what you found. It reloads everything for the route.

Instead, add a parameter to your child route and every time the link is clicked make sure to change that parameter. That will force the child state to be reloaded.

I updated your plunk with an example. I just added a num parameter and increase a count variable each time the link is clicked.

http://plnkr.co/edit/qTA39rrYFYUegzuFbWnc?p=preview