UI-Router How to automatically load a nested view within the parent view as a default

Question

I've been playing with UI-Router since ngRoute doesn't quite cover what I needed based on my different layouts requiring multiple nested views. What I can't figure out in UI-Router is how to load default nested views without having to click a link. I created a crude example of what I'm mean in a plunker

Essentially there are two main route within each there is a container which hosts nested views. I want to load a default view into them without have to click a ui-sref.

<h1>Auth Panel</h1> <-- main route 1
Just a container for login/forgot/reset
<hr/>
<a ui-sref="auth.login">Show Login</a><br> <-- can click to load nested view, but want to autoload
How to show automatically /login within the panel <br>
without having to click show login?
<div ui-view></div> <-- child to autoload with /login

Thanks

Answer 1

On your parent state add a param

.state('parentState', {
//...
    params: {
        autoActivateChild: 'parentState.childState'
    }
//...
})

And add this somewhere

$rootScope.$on('$stateChangeSuccess', function(event, toState){
    var aac;
    if(aac = toState && toState.params && toState.params.autoActivateChild){
        $state.go(aac);
    }
});