Q:

Angular ui-router's ui-sref-active's parent not working

I know that since 0.2.11 sref-active gets activated even if some of the nested children gets activated. However I'm getting weird behavior. 
In this plunk: http://plnkr.co/edit/Tdm2OBeIf8t56gs5qis2?p=preview everything works - when you go to "First section" and click through sub items, "First section" remains bold. But there is a problem - when you click on "First section", normally it should automatically select the first sub item. Currently you get nothing selected. It's the state 'index.first' instead of 'index.first.sub1'.
I tried to address this issue in this plunk: http://plnkr.co/edit/rsiyROmprf73I3qEgAMp?p=preview by changing "First section"'s ui-sref from 'index.first' to 'index.first.sub1'.
From this:
<li><a ui-sref="index.first" ui-sref-active="bold">First section</a></li>
To this:
<li><a ui-sref="index.first.sub1" ui-sref-active="bold">First section</a></li> 
And it breaks. If you click through sub items, only 'sub1' will get "First section" to be bold. Why is it happening? I want all three to make "First section" bold.

A:

We can use a .when() setting. Check this updated plunker
$urlRouterProvider.when('/index/first', '/index/first/sub1'); 

So, before the 'index.first' is fired, we do redirect to its first substate
See:

when() for redirection (small cite:)

Parameters:

what String | RegExp | UrlMatcher The incoming path that you want to redirect.
handler String | Function The path you want to redirect your user to.

handler as String
If handler is a string, it is treated as a redirect, and is interpolated according to the syntax of match (i.e. like String.replace() for RegExp, or like a UrlMatcher pattern otherwise).

app.config(function($urlRouterProvider){
    // when there is an empty route, redirect to /index   
    $urlRouterProvider.when('', '/index');

    // You can also use regex for the match parameter
    $urlRouterProvider.when(/aspx/i, '/index');
})

