Infinite loop in State Change Events in angularjs - angularjs

Question

I want to change the state from "mycarts" state to "carts" state. so I used $stateChangeStart angularjs event in "mycarts" controller and set a condition if the state you are going from "mycarts" state is "carts" state so go to the carts state.
Here is my angular event in my controller :
$scope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
if (toState.name === 'carts' && fromState.name === 'mycarts') {
$state.go('carts', fromParams, true);
event.preventDefault();
return;
}
if (toState.name === 'mycarts' && fromState.name === 'mycarts') {
//Nothing
} else {
$rootScope.selectedItemsMyCarts = undefined;
}
});
My code will be stuck in :
if (toState.name === 'carts' && fromState.name === 'mycarts') {
$state.go('carts', fromParams, true);
event.preventDefault();
return;
}
Here is my state in app.js
.state('mycarts', {
url : '/mycarts/:type/:vendor?vendors&price_to&price_from&manufacturer&editor&theme&page&order&filter_by&no',
params: {
type: {squash: true, value: null},
vendor: {squash: true, value: null}
},templateUrl : 'partials/mycarts.html',
controller : 'MyCartsController'
}).state('carts', {
url : '/carts/:id?vendors&price_to&price_from&manufacturer&editor&theme&page&order&no',
templateUrl : 'partials/carts.html',
controller : 'CartsController'
}
And I get angular.js:12416 RangeError: Maximum call stack size exceeded error.
why this happens? And what is the solution if I want to change a state due to a condition in angular event? And what kind of documents I can read to understand what exactly going on when events like this happends.

Answer 1

If he is already going to the carts state, why are you doing this? :
$state.go('carts', fromParams, true);