Tabs in AngularJs

The Angularjs doesn’t have a directive to serves as tabs. We can easily create tabs, each tab contains different information associated with each tab button.
In this tutorial we are creating simple tabs contenting four tabs button and clicking on each will display its corresponding data and hide other unclicked tabs contents.

Screenshot  of our apps. 

Add following code in our template file let say tabs.html
<!DOCTYPE html>
<html ng-app="tabApp">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="js/angular.min.js"></script>
<style>
li::after {
  content: " | ";
}
 li.active > a{
  background-color: red;
  color:white;
  border-radius: 2px;
  margin:1em;
  padding: 0.2em;
}
</style>
<body>
  <div class="container">
    <div ng-controller="TabController">
      <ul class="breadcrumb">
        <li ng-class="{ active: isSet(1) }"><a href ng-click="setTab(1)">Profile</a></li>
        <li ng-class="{ active: isSet(2) }"><a href ng-click="setTab(2)">Friend</a></li>
        <li ng-class="{ active: isSet(3) }"><a href ng-click="setTab(3)">Privacy</a></li>
        <li ng-class="{ active: isSet(4) }"><a href ng-click="setTab(4)">Chat </a></li>
      </ul>
      <div ng-show="isSet(1)">
        <p>Tab contenting the profile Information</p>
      </div>
      <div ng-show="isSet(2)">
        <p>Tab contenting the Friends Information</p>
      </div>
      <div class="block-friends" ng-show="isSet(3)">
        <p>Tab contenting the privacy Information</p>
      </div>
      <div class="block-friends" ng-show="isSet(4)">
        <p>Tab contenting the Chat Information</p>
      </div>
    </div>
  </div>
  <script>
  angular.module('tabApp', [])
    .controller('TabController', function($scope) {
      $scope.tab = 1;

      $scope.setTab = function(newTab){
        $scope.tab = newTab;
      };

      $scope.isSet = function(tabNum){
        return $scope.tab === tabNum;
      };
  });
  </script>
</body>
</html>