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 onEnter function and inside I'm using $state.go('mainstate.substate'); 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 into a loop).
$stateProvider
.state('main', {
  url: '/main',
  templateUrl: 'main.html',
  onEnter: function($state) {
    $state.go('main.street');
  }
})
.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 the default tab open and that's exactly what I need.
Thank you for your suggestions, opinions and ideas.
 
     
     
     
     
     
     
     
     
    