UI-Router Not Going to Correct State from URL

Question

I have a bit of a complicated set up with lots of nested tabs / views. Here are the relevant parts of my $stateProvider

$stateProvider
    .state('tab', {
        abstract: true,
        url: '',
        templateUrl: 'tabs.html'
    })
    .state('tab.event', {
        url: '/event',
        views: {
            'event': {
                abstract: true,
                templateUrl: 'event-tabs.html'
            }
        }
    })
    .state('tab.event.list', {
        url: '/list',
        views: {
            'list': {
                templateUrl: 'event-list.html'
            }
        }
    })
    .state('tab.event.detail', {
        cache: false,
        url: '/:id',
        views: {
            'detail': {
                abstract: true,
                templateUrl: 'event-detail-tabs.html'
            }
        }
    })
    .state('tab.event.detail.info', {
        cache: false,
        url: '/info',
        views: {
            'info': {
                templateUrl: 'event-detail-info.html'
            }
        }
    })
    .state('tab.event.detail.map', {
        cache: false,
        url: '/map',
        views: {
            'map': {
                templateUrl: 'event-detail-map.html'
            }
        }
    });

• Using ui-sref="tab.event.detail({id: event.id})" I can link to the tab.event.detail.info state and the URL changes to /event/:id/info, good.
• If I enter the URL /event/:id it will redirect to /event/:id/info, good.
• BUT if I enter the URL /event/:id/info the state will change to tab.event.list and URL to /event/list, not good.

I'd like to be able to share links to /event/:id/info and /event/:id/map but they keep redirecting to /event/list
Tried lots of things but can't get it to work, please help!

Edit: Made a Plunker example but I can't replicate the problem because I can't directly manipulate the URL of the app. https://plnkr.co/edit/7iZAH26SwAILqBfkdXJS?p=preview

Answer 1

Your "tab.event.detail" state is an abstract state that means the state it self can not be activated by it self so it will automatically load the child state in this case "tab.event.detail.info" state.

Remember: only one state at a time can be activated.

Refer to the documentation https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views