Hello All,

Working with AngularJS, which helps us to create and work with one page application, and in one page application we want to show all the Data in only one page, In such situation we must show the data in well organized manner and to do that, we can create tab controls.

AngularJS has provided some of the in built functions for showing tab panels in UI. And to do that we have the following code packet:

<section ng-init="tab = 1">
    <ul class="nav nav-pills">
        <li>
            <a href="#" ng-click="tab = 1">Dashboard</a>
        </li>
        <li>
            <a href="#" ng-click="tab = 2">About</a>
        </li>
        <li>
            <a href="#" ng-click="tab = 3">Product</a>
        </li>
    </ul>
    <div class="container mainContentDiv" ng-show="tab === 1">
        <div class="page-header headerDiv">
            <h3>Dashboard {{tab}}</h3>
        </div>
    </div>
    <div class="container mainContentDiv" ng-show="tab === 2">
        <div class="page-header headerDiv">
            <h3>About {{tab}}</h3>
        </div>
    </div>
    <div class="container mainContentDiv" ng-show="tab === 3">
        <div class="page-header headerDiv">
            <h3>Product {{tab}}</h3>
        </div>
    </div>        
</section>

Here we have added ng-click directive which takes and expression to evaluate where we are providing tab = 1, tab = 2, tab = 3 and to check the value of the tab expression we can simply print {{tab}} which will show the output on the UI as 1, 2, 3. This also demonstrates the concept of Two way data binding in AngularJS.

Note : You must add all the required AngularJS files to before start working on this example.