how to make a default nested state for a non abstracted state

Question

I'm using ui-router as follow:

3 main states home, profile and settings like this:

The 2nd state profile have 2 nested states profile.about and profile.main

I need that the profile state clickable on the index page loads the profile view and redirects to the default nested state which is profile.about here

Here's a plunker with what I got so far.

I'm aware of this solutions:

• how to set up a defaultindex child state
• how to set default child view with angular-ui-router

And others but all require an abstract parent which is unclickable hence abstract.

So, to summaries my question is how to make a nested default view for a non abstracted state?

Answer 1

As discussed in comment, solution here would usually be with the .when() defintion as desribed here:

• Angular UI-Router $urlRouterProvider .when not working *anymore*
• Angular UI-Router $urlRouterProvider .when not working when I click <a ui-sref="...">

In version before 2.0.13 we could use the native solution like this (myService is a place for some default value... not needed if no params):

var whenConfig = ['$urlRouterProvider', function($urlRouterProvider) {

    $urlRouterProvider
      .when('/app/list', ['$state', 'myService', function ($state, myService) {
            $state.go('app.list.detail', {id: myService.Params.id});
    }])
    .otherwise('/app');
}];
...
app.config(whenConfig) 

But after a fix in version 2.0.13 this is not working, but we can make it with this workaround:

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

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

}]

See also this bug report for some other examples: https://github.com/angular-ui/ui-router/issues/1584