Blu Blu - 2 months ago 19x
AngularJS Question

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

In my music app, I have an ng-repeat on the top-level states of my app to create navigation links. One of the top-level states, called library, is abstract and has child states (which are navigable using tabs). Since I am using an ng-repeat, the abstract state has a directive of

. However, it's not possible to navigate to an abstract parent state like that, instead I would need to write
. I am unable to do this because of the ng-repeat data coming directly from the state provider. How can I set a default child state on "library" so that whenever that state is visited, it redirects to the child?

Here's a diagram of my setup:
enter image description here


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( == 'library'){
        $state.go('library.albums', toParams);

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

    .state('library', {
        url: '/library',
        data: {
            redirect: 'library.albums'
    .state('library.albums', {
        url: '/albums',
        data: {
            redirect: false

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