title: how to set class="active" when there are N number of tabs(bootstrap) generating using iteration?
body: <p>Here is my sample code, i am generating series of tabs using ng-repeat(angular js directive). When i use class="active" it display the content of all the tabs because it sets class="active" for all the tabs   </p>
  
  <pre><code>&lt;!doctype html&gt;
      &lt;html lang="en"&gt;
      &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;Demo Application&lt;/title&gt;
        &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;title&gt;Bootstrap 101 Template&lt;/title&gt;
           &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
        &lt;link href="animation.css" rel="stylesheet" type="text/css"&gt;
        &lt;script src="angular.min.js"&gt;&lt;/script&gt;
  
        &lt;script src="angular-animate.js"&gt;&lt;/script&gt;
  
  
  
      &lt;/head&gt;
  
      &lt;body ng-app="myApp" ng-controller="MyCtrl"&gt;
       &lt;div class="container"&gt;
        &lt;div class="row"&gt;
           &lt;ul class="nav nav-tabs nav-justified"  role="tablist" id="myTab"&gt;
              &lt;li ng-repeat="item in data | startFrom:currentPage*pageSize | limitTo:pageSize"&gt;&lt;a href="#{{item}}"  role="tab" data-toggle="tab" &gt;
                  {{item}}
                  &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  
                 &lt;div class="tab-content"&gt;
                                      &lt;div ng-repeat="item in data" id="{{item}}" class="tab-pane"&gt;
                                          {{item}}
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
  
  
         &lt;div style="text-align:center; margin-top:50px;"&gt;
          &lt;button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1"&gt;
              Previous
          &lt;/button&gt;
          {{currentPage+1}}/{{numberOfPages()}}
          &lt;button ng-disabled="currentPage &gt;= data.length/pageSize - 1" ng-click="currentPage=currentPage+1"&gt;
              Next
          &lt;/button&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/body&gt;
  
      &lt;script&gt;
          var app=angular.module('myApp', []);
  
          app.controller('MyCtrl', function($scope){
  
             $scope.currentPage = 0;
          $scope.pageSize = 10;
          $scope.data = [];
  
          $scope.numberOfPages=function(){
              return Math.ceil($scope.data.length/$scope.pageSize);                
          }
          for (var i=0; i&lt;45; i++) {
              $scope.data.push("Item"+i);
  
          }
  
          });
      app.filter('startFrom', function() {
          return function(input, start) {
              start = +start; //parse to int
              return input.slice(start);
          }
      });
  
      &lt;/script&gt;
  
  
  
      &lt;/html&gt;
  </code></pre>
  
  <p>Now i want Item0 to be activated , first time when the page is getting loded. Again when we move to next series of tabs the first one should be activated. (i.e. while moving back and forth).</p>