How to make angular ui-router's parent state always execute controller code when state changes?

Question

Let's say we have a parent-child relationship defined in our $stateProvider as follows:

    .state('myProfile', {
        url: "/my/profile",
        templateUrl: 'my/profile.html',
        controller: 'MyProfileController'
    }).state('myProfile.edit', {
        url: "/edit",
        templateUrl: 'my/profile.edit.html',
        controller: 'EditMyProfileController'
    });

The idea here is that the parent myProfile state is non-editable, but the child myProfile.edit state is the actual form to edit the profile. Let's ignore if this is how a profile page should work - I'm just playing around with things and learning.

When a user submits the form, I use the $state object to go back to the parent page:

$scope.save = function() {
    userResource.update($scope.user, function() {
        SessionService.refresh();

        $state.go('myProfile'); // also tried with reload: true as well
    });
}

After the user saves the profile data - and it is getting saved properly - the parent's view does not get updated unless I hit F5 and refresh the browser.

One thing I have noticed is that if I make the child myProfile.edit state into a parent itself and not a child of the myProfile state, this problem actually goes away and things behave as expected (albeit, the layout looks bad like this).

It seems that UI Router is maybe caching the result of the parent, unsuspecting that things have changed in the model and that it needs to rerun the controller?

How can I keep my parent-child relationship while still having the parent myProfile page always execute its controller to reload its data? Basically, I want this to happen whenever $state is used or when a link is clicked that directs to myProfile. How can I do that?

And if I cannot do what I ask, then I am aware that I can setup a bunch of child states and have them work as intended... however, how can I set the default child state for the parent? For example, let's say I want myProfile.edit to be the default child state of myProfile - how can I do that?

Thanks!

Solution 1

To force a parent state to reload when navigate to him from a child state you can use both ways below. Pure js or a directive attribute.

<a ui-sref="myProfile" ui-sref-opts="{ reload: true }">Back to My Profile</a>

or

$state.go('myProfile', null, { reload: true });

Solution 2

Have you tried listening for the "$stateChangeStart" event and/or using $state.reload() ?

Solution 3

Seems like there is a bug on $state.go which is leaving out the reload options. $state.transitionTo however works for me.

$state.transitionTo('state',null,{reload: true});