AngularJS Tabs

Simple angularjs tab

by Nikhil krishnan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <section ng-app="myApp" ng-controller="TabController as tab">
    <ul class="nav nav-pills">
      <li ng-click="setTag('tabOne')" ng-class="{active:flagData.tabFlag =='tabOne'}">
        <a >Tab 1</a>
      </li>
      <li ng-click="setTag('tabTwo')" ng-class="{active:flagData.tabFlag =='tabTwo'}">
        <a >Tab 2</a>
      </li>
      <li ng-click="setTag('tabThree')" ng-class="{active:flagData.tabFlag =='tabThree'}">
        <a >Tab 3</a>
      </li>
    </ul>

    <div ng-show="flagData.tabFlag == 'tabOne'">
      <h4>Tab 1</h4>
    </div>
    <div ng-show="flagData.tabFlag == 'tabTwo'">
      <h4>Tab 2</h4>
    </div>
    <div ng-show="flagData.tabFlag == 'tabThree'">
      <h4>Tab 3</h4>
    </div>
  </section>
</div>

JavaScript

(function() {
  var app = angular.module('myApp', []);

  app.controller('TabController', function($scope) {
    //tab
    $scope.flagData = {};
    $scope.flagData.tabFlag = 'tabOne';

    $scope.setTag = function(selectedTag) {
      $scope.flagData.tabFlag = selectedTag;
    };
  });
})();