Can I stop the first nested tab always being selected when switching?

I want to have a UI with 4 main tabs and within the first tab, there will be 3 sub-tabs at the top of the screen. The current state of these sub-tabs needs to be persisted, so if the user switches to another main tab and back again to the first tab, then they see it how they left it.

However I can’t get this to work. When switching to the first tab, the sub-tabs always get reset so the first sub-tab is also shown. Is this possible?


If you edit the primary home tab href to remove the ‘/first’ portion of the url, it looks like this fixes the issue. When I edit accordingly, I can click on second --> about --> home and it returns to the second tab. Same for starting at third or first as well.

Also, if you are interested in storing that state for eventual return, you could create a service to store between controllers/views.

.service('tabService', function() {
  var self = this; = 'tabs.home.first';

Then, you could setup a listener on $stateChangeStart to grab the new state each time you go to a new tab and use this for eventual return.

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { =;

note - you would need to inject $rootScope and tabService into the home controller to use this.

i do someting similar in this pen

i have a top level controller that is managing some state information for the tabs

Thanks guys. I have it working now.

@martinjbaker can you share example in codepen…because I’m facing a same problem