Leo Leo - 2 months ago 18
Javascript Question

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

I'm creating a tab based page which shows some data.
I'm using UI-Router in AngularJs to register states.

My aim is to have one default tab open on page load. Each tab have sub tabs, and I would like to have a default sub tab open when changing tabs.

I was testing with

function and inside I'm using
but it seems not to work due to loop effect issues (on state.go to substate it calls its parent state and so on, and it turns in a loop).


.state('main', {
url: '/main',
templateUrl: 'main.html',
onEnter: function($state) {

.state('main.street', {
url: '/street',
templateUrl: 'submenu.html',
params: {tabName: 'street'}

Here I created a plunker demo.

For now everything works, except that I don't have default tab open and that's exactly what I need.

Thank you for your suggestions, opinions and ideas.


I created an example here.

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


So firstly let's extend main with redirection setting:

    .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) {
        $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.