UI Router: redirect to child state when navigating to abstract parent state

Found this question when I was looking for the same and then I found this on Angular UI-Router's FAQ page. https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions

How to: Set up a default/index child state

  1. Make the parent state abstract.

    $stateProvider
        .state('library', {
            url: '/library',
            abstract: true,
            template: '<ui-view></ui-view>'
        })
        .state('library.albums', {
            url: '/albums',
            template: '<h1>Albums</h1>'
        });
    
  2. Then if you give the child state an empty URL, it will match the exact parent's URL. However, if you want to keep a separate URL for the child, you can do this:

    $urlRouterProvider.when('/library', '/library/albums');
    

Read the given GitHub WIKI URL if you need more information.


Unfortunately you can't use ui-sref to link to an abstract state.

you could try something like:

$rootScope.$on('$stateChangeStart', function(event, toState, toParams){
    if(toState.name == 'library'){
        event.preventDefault();
        $state.go('library.albums', toParams);
    }
}

Rather than hardcoding each state redirection though, you could do something like:

$stateProvider
    .state('library', {
        url: '/library',
        data: {
            redirect: 'library.albums'
        }
    })
    .state('library.albums', {
        url: '/albums',
        data: {
            redirect: false
        }
    });

$rootScope.$on('$stateChangeStart', function(event, toState, toParams){
    if(toState.data && toState.data.redirect){
        event.preventDefault();
        $state.go(toState.data.redirect, toParams);
    }
}