How to create nested tabs where first tab is selected

1

Hi all,

I want to create nested tabs. I searched in the forum but did not find solutions for this specific problem. I don’t have nested states just plain html.
I took the starter project and in the first tab i made additional three tabs where the class is tabs-top.
I would anticipate that the first sub-tab is selected but it is not, rather the third tab is selected.
Additionally the sub tab should be positioned at the upper edge of the content, but a gap is created.
What can i do in these issues?

Here is a codepen which explains the problem http://codepen.io/david-gang/pen/qprKc
Thanks,
David

<!-- 
  Create tabs with an icon and label, using the tabs-positive style. 
  Each tab's child <ion-nav-view> directive will have its own 
  navigation history that also transitions its views in and out.
-->
<ion-tabs class="tabs-icon-top">


  <!-- Dashboard Tab -->
  <ion-tab title="Dashboard" icon="icon ion-home" href="#/tab/dash">
        <ion-tabs class="tabs-striped tabs-top tabs-background-positive tabs-light">


  <!-- Dashboard Tab -->
  <ion-tab title="Dashboard" icon="icon ion-home">
        abc
  </ion-tab>


  <!-- Friends Tab -->
  <ion-tab title="Friends" icon="icon ion-heart">
    def
  </ion-tab>


  <!-- Account Tab -->
  <ion-tab title="Account" icon="icon ion-gear-b">
   ghi
  </ion-tab>


</ion-tabs>

  </ion-tab>


  <!-- Friends Tab -->
  <ion-tab title="Friends" icon="icon ion-heart" href="#/tab/friends">
  </ion-tab>


  <!-- Account Tab -->
  <ion-tab title="Account" icon="icon ion-gear-b" href="#/tab/account">
  </ion-tab>


</ion-tabs>
2

See my topic :