Q:

how to set class="active" when there are N number of tabs(bootstrap) generating using iteration?

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   
<!doctype html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Demo Application</title>
      <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 101 Template</title>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <link href="css/bootstrap.min.css" rel="stylesheet">
      <link href="animation.css" rel="stylesheet" type="text/css">
      <script src="angular.min.js"></script>

      <script src="angular-animate.js"></script>

    </head>

    <body ng-app="myApp" ng-controller="MyCtrl">
     <div class="container">
      <div class="row">
         <ul class="nav nav-tabs nav-justified"  role="tablist" id="myTab">
            <li ng-repeat="item in data | startFrom:currentPage*pageSize | limitTo:pageSize"><a href="#{{item}}"  role="tab" data-toggle="tab" >
                {{item}}
                </a>
            </li>
        </ul>

               <div class="tab-content">
                                    <div ng-repeat="item in data" id="{{item}}" class="tab-pane">
                                        {{item}}
                                    </div>
                                </div>

       <div style="text-align:center; margin-top:50px;">
        <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
            Previous
        </button>
        {{currentPage+1}}/{{numberOfPages()}}
        <button ng-disabled="currentPage >= data.length/pageSize - 1" ng-click="currentPage=currentPage+1">
            Next
        </button>
        </div>

    </div>
    </div>
    </body>

    <script>
        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<45; i++) {
            $scope.data.push("Item"+i);

        }

        });
    app.filter('startFrom', function() {
        return function(input, start) {
            start = +start; //parse to int
            return input.slice(start);
        }
    });

    </script>

    </html>

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).

A:

Please see here http://jsbin.com/zayadosuguni/2/edit
just add that ng-class="{'active': $index == 0}" which means ~ set class active for first element in ng-repeater
and for content tab add ng-class="{'active': $index == (pageSize * currentPage) }"
<div class="container">
    <div class="row">
        <ul class="nav nav-tabs nav-justified" role="tablist" id="myTab">
            <li ng-repeat="item in data | startFrom:currentPage*pageSize | limitTo:pageSize"><a href="#{{item}}" role="tab" data-toggle="tab" ng-class="{'active': $index == 0}">
          {{item}} 
                </a>

            </li>
        </ul>
        <div class="tab-content">
            <div ng-repeat="item in data" id="{{item}}" class="tab-pane" ng-class="{'active': $index == (pageSize * currentPage) }">Content of {{item}} {{}}</div>
        </div>

