Getting a "Transition Rejection( .." error after using "$state.go('stateName', null, {'reload':true});"

Question

I was trying to reload my controller using

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

But after using this, I am getting this error

Transition Rejection($id: 1 type: 2, message: The transition has been superseded by a different transition, detail: Transition#63( 'home'{} -> 'movies'{} ))

I am clueless why is this happening. Although the functionality is working fine.

Code:

$scope.filterMovies = function(genre){
    var filteredMovies = [];
    MoviesService.msGetData().then(function(dataparam){
        $scope.movielist = dataparam;
        for(var idx=0; idx<$scope.movielist.length; idx++){
            if($scope.movielist[idx].genres.indexOf(genre) > -1){
                filteredMovies.push($scope.movielist[idx]);
                MoviesService.msSetFilteredMovies(filteredMovies);
                //$state.go('movies');
                $state.go('movies', null, {'reload':true});
            }
        }
     });
 }

Note: I am using AngularJS v1.6.5 and angular-ui-router v1.0.5

Answer 1

The error is occurring because you're creating a new transition within an existing one. As the error says, the transition to home is being superseded by the transition to movies which you're creating with $state.go('movies'[, ...]);.

To stop the error occurring place $state.go('movies') within a $timeout. E.g.

$timeout(function() {
  $state.go('movies', null, {'reload':true});
});