First nested tab does not get selected when selecting parent tab


When using nested tabs I want the first nested tab selected by default.
Please, look at this example: The first tab’s content under home is not rendered when clicking on the Home tab.

Issue tracked here


Strange effects here :wink:
As far as I can tell your code looks good.

If you have two tabs and get the default route as $urlRouterProvider.otherwise("/tab/home/second") the second tab get’s displayed. => OK
If you add a third tab the above doesn’t work any longer => FAIL
If you then change the default route to $urlRouterProvider.otherwise("/tab/home/third") the third tab get’s displayed => OK

It really seems to be an issue with nested tabs …


I’ve got a similar issue with that. I’d like to use a second tabbar as kind of a subnavigation.

When I select the first main tab on the bottom, the nested tabbars first item is marked as active but shows the content of the second item. It should show the content of the first tab.

Maybe you can have a look at my pen:

edit. on the first loads there are mulitple panes nested unter the tabs:

When you remove all the panes except the first one with your Debug-Console it works.

I hotfixed that issue with css:

.sub-tabs .pane:nth-child(3) {
   display: none;

just add sub-tabs class to the tabbar and your fine with 2 nested tabs.

I also tried a more generic CSS rule, but it breaks with :not selector