UI-Router state.go call back on state change

Question

I need a callback when state.go has been invoked successfully, and set my alert message. Currently the message is pushed to the array, after state.go has been called. State.go calls the controller, and the array containing the alert message is set to empty.

Result, no alert message will be shown.

Controller:

$scope.alerts = []; // empty array, initialized on startup
.....
// This could be any function
.success(function(data, status, headers, config, statusText){
     $state.go($state.current, {}, {reload : true});
     $scope.alerts.push({type : 'success', msg : status});
})
.error(function(error){
    console.log(error.message);
});

Answer 1

$state.go() returns a promise.

So do something like:

$state.go('wherever', {whenever: 'whatever'}).then(function() {
  // Get in a spaceship and fly to Jupiter, or whatever your callback does.
});

Answer 2

You may use state change listener.

 $rootScope
            .$on('$stateChangeSuccess',
                function (event, toState, toParams, fromState, fromParams) {
                    //show alert()
                });

See State Change Events.