i am creating a simple Angular.js tabbing box which changes the box that is active accoring to a value 'tab' that is used inside ng-show on the elements.
This is working fine, however, at the moment I am writing all the HTML statically and I would rather cut down my code into a simple ng-repeat loop to loop through all the divs.

This is easy enough in PHP as I would use a foreach loop and use the key to generate the tab number, I just can't seem to do this in Angular. Here is my code at the moment:

```
<div id="services-box-nav">
                    <ul>
                        <li><a href="#" ng-click="tab = 1" ng-class="{'active' : tab == 1}">Rewards</a></li>
                        <li><a href="#" ng-click="tab = 2" ng-class="{'active' : tab == 2}">Community</a></li>
                        <li><a href="#" ng-click="tab = 3" ng-class="{'active' : tab == 3}">Partners</a></li>
                        <li><a href="#" ng-click="tab = 4" ng-class="{'active' : tab == 4}">Jobs</a></li>
                        <li><a href="#" ng-click="tab = 5" ng-class="{'active' : tab == 5}">Volunteering</a></li>
                        <li><a href="#" ng-click="tab = 6" ng-class="{'active' : tab == 6}">Feedback</a></li>
                        <li><a href="#" ng-click="tab = 7" ng-class="{'active' : tab == 7}">Gallery</a></li>
                    </ul>
                </div>
                <div id="services-content-boxes">                   
                    <div ng-show="tab == 1">
                        <div class="row">
                            <div class="col-md-12">
                                <h3>{{serviceBoxes.rewards.title}}</h3>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-5">
                                {{serviceBoxes.rewards.text}}
                            </div>
                            <div class="col-md-7">

                            </div>
                        </div>
                    </div>                  
                    <div ng-show="tab == 2">dwd</div>
                    <div ng-show="tab == 3">d</div>
                    <div ng-show="tab == 4">df</div>
                    <div ng-show="tab == 5">gr</div>
                    <div ng-show="tab == 6">r</div>
                    <div ng-show="tab == 7">rg</div>                    
                </div>

 controller('servicesController', function($scope, $location, joomlaService) {  
    $scope.serviceBoxes = {};       
    joomlaService.getArticleDetails(21).then(function(articleReturnData) {          
        $scope.serviceBoxes.rewards = articleReturnData;
    });
    joomlaService.getArticleDetails(22).then(function(articleReturnData) {          
        $scope.serviceBoxes.community = articleReturnData;
    });     
    joomlaService.getArticleDetails(23).then(function(articleReturnData) {          
        $scope.serviceBoxes.partners = articleReturnData;
    });     
    joomlaService.getArticleDetails(24).then(function(articleReturnData) {          
        $scope.serviceBoxes.jobs = articleReturnData;
    });     
    joomlaService.getArticleDetails(25).then(function(articleReturnData) {          
        $scope.serviceBoxes.volunteering = articleReturnData;
    });     
    joomlaService.getArticleDetails(26).then(function(articleReturnData) {          
        $scope.serviceBoxes.feedback = articleReturnData;
    });     
    joomlaService.getArticleDetails(27).then(function(articleReturnData) {          
        $scope.serviceBoxes.gallery = articleReturnData;
    });         
});

```

What I want to do is loop through the serviceBoxes object and dynamically create the ng-show condition (tab == i) using the key, which should increment each time (1, 2, 3, 4, etc). I don't know how I go about this using Angular. It would cut down my code considerably so feel it is necessary.

Can anyone point out how this is done?

Thanks