angularjs with bootstrap vertical nested tab load the content using ajax

Question

I have created Dynamic Tab using angularjs with bootstarp. It is working fine. Also i tried to create Sub Tab under a tab dynamically. It also working fine. Now i am trying to move to next tab main tab and click back to the sub tab, but it always opens the main tab not the sub tab. I need the sub tab to be active How can i solve the problem?

where i mistake my code ?

My Code

 <uib-tabset vertical="true" class="tabs-left">
    <uib-tab ng-repeat="tab in menuList" select="getContent(tab.menuid)" active="tab.active">
      <tab-heading>
        <i class="fa {{tab.Icon}}"> </i> &nbsp{{tab.Name}}     
        <uib-tab ng-repeat="submenu in tab.submenu" select="getSubContent(tab.menuid, submenu.menuid)" active="submenu.active">
          <tab-heading>
            <i class="fa {{submenu.Icon}}"> </i> &nbsp{{submenu.Name}} 

            <i class="glyphicon glyphicon-remove" ng-click="removeSubTab(tab, submenu.menuid)"></i>
          </tab-heading>
          <div class="col-xs-10" class="tab-content">
            <div ng-hide="!submenu.isLoaded">
              <div bind-unsafe-html="submenu.content"></div>
            </div>
            <div ng-hide="submenu.isLoaded"><h3>Loading...</h3></div>                 
          </div>
        </uib-tab>
      </tab-heading>
      <div class="col-xs-10" class="tab-content">
        <div ng-hide="!tab.isLoaded">
          <div bind-unsafe-html="tab.content"></div>
        </div>
        <div ng-hide="tab.isLoaded"><h3>Loading...</h3></div>            
      </div>
    </uib-tab>
  </uib-tabset>

Current Img

But i expected

Answer 1

First, creating a minimally working plunker showing the exact problem greatly assists us in assisting you.

Secondly, you're nesting tabs in the <tab-heading> element which is almost assuredly NOT what you want.