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: 
Something like this should work:

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

        <a class="showSingle btn btn-primary" ng-click="selectedIndex = selectedIndex + 1">Next</a>
    </div>
 </div>

```

By the way if u want to show 1 question u dont need ng-repeat:

```
<div class="targetDiv">
   <h3>{{questions[selectedIndex].question}}</h3>

   <a class="showSingle btn btn-primary" ng-click="selectedIndex = selectedIndex + 1">Next</a>
</div>

```
Maybe something like this will sute you

```
<div class="col-md-10" ng-init="firstQuestion()">
    <div ng-repeat="question in Questions" class="targetDiv" ng-show="$index == currentQuestionIndex">
        <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()" ng-show = "currentQuestionIndex < Questions.length - 1">Next</a>
    </div>
</div>

```

with js like

```
$scope.firstQuestion = function () {
            $scope.currentQuestionIndex = 0;
        };

        $scope.doSomething = function () {
            if ($scope.currentQuestionIndex < $scope.Questions.length)
                $scope.currentQuestionIndex += 1;
        }

```

---

Or something like this

```
<div class="col-md-10" ng-init="firstQuestion()">    
    <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()" ng-show = "currentQuestionIndex < Questions.length - 1">Next</a>
</div>

```

with js

```
$scope.firstQuestion = function () {
            $scope.currentQuestionIndex = 0;
            $scope.question = $scope.Questions[$scope.currentQuestionIndex];
        };

        $scope.doSomething = function () {
            if ($scope.currentQuestionIndex < $scope.Questions.length) {
                $scope.currentQuestionIndex += 1;
                $scope.question = $scope.Questions[$scope.currentQuestionIndex];
            }
        }

```