How to change the content of a tab while you are on the same tab using AngularJS and Bootstrap?

Posted by user2958608 on Stack Overflow See other posts from Stack Overflow or by user2958608
Published on 2013-11-07T19:04:46Z Indexed on 2013/11/07 21:54 UTC
Read the original article Hit count: 234

Using AngularJS and Bootstrap, let say there are 3 tabs: tab1, tab2, and tab3. There are also some links on each tabs. Now for example, tab1 is active. The question is: how to change the content of the tab1 by clicking a link within the same tab?

main.html:
<div class="tabbable">
  <ul class="nav nav-tabs">
    <li ng-class="{active: activeTab == 'tab1'}"><a ng-click="activeTab = 'tab1'" href="">tab1</a></li>
    <li ng-class="{active: activeTab == 'tab2'}"><a ng-click="activeTab = 'tab2'" href="">tab2</a></li>
    <li ng-class="{active: activeTab == 'tab3'}"><a ng-click="activeTab = 'tab3'" href="">tab3</a></li>
  </ul>
</div>
<div class="tab-content">
  <div ng-include="'/'+activeTab"></div>
</div>

tab1.html:
<h1>TAB1</h1>
<a href="/something">Something</a>

something.html
<h1>SOMETHING</h1>

Now the question is how to change the tab1 content to something.html while the tab1 is active?

© Stack Overflow or respective owner

Related posts about angularjs

Related posts about twitter-bootstrap-3