Question: I'm trying to achieve Tabs like functionality using Divs whose Div Id is generated using ng-repeat. 

```
    <div class="col-md-10">
   <div id="div{{$index}}" class="targetDiv" ng-show="setSomething" ng-repeat="question in Questions">
       <h3>{{question.question}}</h3>

        <button style="width: 100%; margin-bottom: 4px; padding-bottom: 2px;" class="btn btn-primary" ng-repeat="answers in question.Answers">
                  {{answers.AnswerText}}
        </button>

        <a class="showSingle btn btn-primary" ng-click="doSomething()">Next</a>
    </div>
 </div>

```

I've tried so many ways and even tried googling similar things, but I could not achieve it, may because of limited knowledge of AngularJs. I'm trying to achieve somthing like the following image. Remember each picture represents a DIV and when you click on NEXT current DIV hides and DIV with second question Shows up . .![Div1 ](https://i.stack.imgur.com/HBkAf.png)
![Div2](https://i.stack.imgur.com/a2iA6.png)

Controller Code:

```
  $scope.showonlyone = function (divToShow) {
        angular.forEach($scope.Questions, function (que, i) {
            if (divToShow == 'div' + i) {
                //$scope.Questions.splice(que, 1);
                return true;
            } else {
                return false;
            }
        })
    };

```

Answer: 
Controller:

```
.controller('QuestionListController', function ($scope) {
    $scope.activeIndex = 0;

    $scope.next = function () {
        if ($scope.activeIndex === ($scope.Questions.length - 1)) {
            alert("finished");
        } else {
            $scope.activeIndex = $scope.activeIndex + 1;
        }
    }
});

```

HTML:

```
<div ng-controller="QuestionListController">
    <div ng-repeat="question in Questions" ng-if="$index == activeIndex">
        ...
    </div>
    <button ng-click="next()">Next</button>
</div>

```

But you might wanna consider putting this into a directive.
The following should work although I haven't tested it inside a real environment:

```
$scope.setActive = function(index) {
  $scope.selectedQuestionIndex = index + 1;
}

$scope.isActive = function(index) {
  return index == $scope.selectedQuestionIndex;
}

```

With your html being:

```
<div class="col-md-10">
  <div id="div{{$index}}" class="targetDiv" ng-show="isActive($index)" ng-repeat="question in Questions">
    <h3>{{question.question}}</h3>

    <button style="width: 100%; margin-bottom: 4px; padding-bottom: 2px;" class="btn btn-primary" ng-repeat="answers in question.Answers">
              {{answers.AnswerText}}
    </button>

    <a class="showSingle btn btn-primary" ng-click="setActive($index)">Next</a>
  </div>
</div>

```