UI-маршрутизатор не исправляет состояние по URL-адресу

У меня немного сложная настройка с большим количеством вложенных вкладок/просмотров. Вот соответствующие части моего $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'
            }
        }
    });

• Используя ui-sref="tab.event.detail({id: event.id})", я могу ссылаться на состояние tab.event.detail.info, а URL-адрес меняется на /event/:id/info, хорошо.
• Если я введу URL /event/:id, он перенаправится на /event/:id/info, good.
• НО, если я введу URL /event/:id/info, состояние изменится на tab.event.list и URL на /event/list, не хорошо.

Я хотел бы иметь возможность обмениваться ссылками с /event/:id/info и /event/:id/map, но они перенаправляются на /event/list
Пробовал много вещей, но не мог заставить его работать, пожалуйста, помогите!

Изменить: сделал пример Plunker, но я не могу реплицировать проблему, потому что я не могу напрямую манипулировать URL-адресом приложения. https://plnkr.co/edit/7iZAH26SwAILqBfkdXJS?p=preview

Ответы

$urlRouterProvider
    .when('/event/:id/info', '/event/:id/info')
    .when('/event/:id/map', '/event/:id/map')

var config = ['$rootScope', '$state',
 function ($rootScope, $state) {

  //you can make the below code better by comparing URL you are hitting in the if condition. Depending on URL you can navigate to info or map state. Also, you can make the id dynamic

  $rootScope.$on('$stateChangeStart', function (event, toState) {    
    if (toState.name == "tab.event.list") { 
      event.preventDefault()
      $state.go('tab.event.detail.info', {id: 2});
    }
  });

}]