Redirect a state to default substate with UI-Router in AngularJS

Update:1.0 Onwards Supports redirectTo out of the box.

https://ui-router.github.io/ng1/docs/latest/interfaces/state.statedeclaration.html#redirectto

I created an example here.

This solution comes from a nice "Comment" to an an issue with redirection using .when() (https://stackoverflow.com/a/27131114/1679310) and really cool solution for it (by Chris T, but the original post was by yahyaKacem)

https://github.com/angular-ui/ui-router/issues/1584#issuecomment-75137373

So firstly let's extend main with redirection setting:

$stateProvider    .state('main', {      url: '/main',      templateUrl: 'main.html',      redirectTo: 'main.street',    })

And add only this few lines into run

app.run(['$rootScope', '$state', function($rootScope, $state) {    $rootScope.$on('$stateChangeStart', function(evt, to, params) {      if (to.redirectTo) {        evt.preventDefault();        $state.go(to.redirectTo, params, {location: 'replace'})      }    });}]);

This way we can adjust any of our states with its default redirection...Check it here

EDIT: Added option from comment by @Alec to preserve the browser history.

In fact even if this solution proposed by Radim did exactly the job, I needed to remember every tab's sub tab (state).

So I found another solution which do the same thing but also remembers every tab substate.

I all have to do was to install ui-router-extras and use the deep state redirect feature:

$stateProvider  .state('main.street', {     url: '/main/street',     templateUrl: 'main.html',     deepStateRedirect: { default: { state: 'main.street.cloud' } },  });

Thank you!

As of version 1.0 of the ui-router it supports a redirectTo property. For example:

.state('A', {  redirectTo: 'A.B'})