Re-use URI in many angular UI-Router state - angularjs

Question

I tried to re-use a url for several states with angular UI-Router.
I tried to do that :
.state('app.contracts', {
url: '/contracts',
controller: function($rootScope, $scope, $state) {
if ($rootScope.isDistributor) {
$state.go('app.contracts-distributor');
} else if ($rootScope.isShop) {
$state.go('app.contracts-shop');
} else if ($rootScope.isVendor) {
$state.go('app.contracts-vendor');
}
}
})
.state('app.contracts-distributor', {
controller: 'ContractDistributorController',
templateUrl: 'views/contracts/list-distributor.html'
})
.state('app.contracts-shop', {
controller: 'ContractShopController',
templateUrl: 'views/contracts/list-shop.html'
})
.state('app.contracts-vendor', {
controller: 'ContractVendorController',
templateUrl: 'views/contracts/list-vendor.html'
})
But when I try this I have an infinite loop.
Any idea what I'm doing wrong?

Answer 1

There is a working plunker
Not sure about the concept, what is the real goal ... but it should work. This is the adjusted state (just to go somewhere on ELSE):
.state('app', { template: '<div ui-view=""></div>', })
.state('app.contracts', {
url: '/contracts',
controller: ['$rootScope', '$scope', '$state',
function($rootScope, $scope, $state) {
if ($rootScope.isDistributor) {
$state.go('app.contracts-distributor');
} else if ($rootScope.isShop) {
$state.go('app.contracts-shop');
} else { // if ($rootScope.isVendor) {
$state.go('app.contracts-vendor');
}
}]
})
I used array controller notation and ng-strict-di, just to avoid later issues with minification. And assured, that parent state app has target ui-view=""
Check it here