How to work with tabs in AngularJS ?

Working with tabs

ng-init

Initialize value on load

ng-click

Sets value on click

<section ng-init="tab = 1">

<ul class="nav nav-pills">

   <li> <a href ng-click="tab = 1">Account</a> </li>

   <li> <a href ng-click="tab = 2">Payments</a> </li>

   <li> <a href ng-click="tab = 3">History</a> </li>

</ul>

{{tab}}

</section>

On initialization, sets tab = 1 which shows first tab.

Then on click of the tab, assigns the new value and print value on screen.

On refresh, again initial tab is set.

2-way data binding

When click on second tab, it will print "2" on screen, and monitored for next change of its value and then updated on screen.

Using panels with tabs

<div class="panel" ng-show="tab = 1">

  ...

  ...

</div>

<div class="panel" ng-show="tab = 2">

  ...

  ...

</div>

<div class="panel" ng-show="tab = 3">

  ...

  ...

</div>