html - Changing the Values in an Unordered List <ul> using ng-repeat; also set an active <li>

Question

I have been trying to work out how to produce a list, where if you click on one of the objects in the list, it becomes active. I have managed to get it working in the non-dynamic version of the code with ease. However, working on AngularJS dynamic version, I just can't seem to get it to work. The data is ok, so it can't be data related, it has to be my dynamic code that is not working.

This is a working piece of code (however not dynamic)

                    <ul class="nav nav-pills" ng-init="catVal = 1">
                        <li ng-class="{active: catVal===1}">
                            <a href="" ng-click="catVal = 1">Category 1</a>
                        </li>
                        <li ng-class="{active: catVal===2}">
                            <a href="" ng-click="catVal = 2">Category 2</a>
                        </li>
                        <li ng-class="{active: catVal===3}">
                            <a href="" ng-click="catVal = 3">Category 3</a>
                        </li>
                    </ul>

Now What I really want is an AngularJS dynamic version of this code. This is what I have tried and failed so far.

                    <ul class="nav nav-pills">
                        <li ng-repeat="category in model" ng-init="catVal = 1" ng-class="active: catVal === category.catID ">
                            <a href="" ng-click="catVal = category.catID">{{category.catName}}</a>
                        </li>
                    </ul>

The catID is associated with the category and should give the same results as the previous list. I get the names in the correct place, just the value is not working.

Answer 1

try this.

var app = angular.module("app",[]);

app.controller("ctrl" , function($scope){
  $scope.rowIndex = -1;
  $scope.items = [{"name":"ali","score":2},{"name":"reza","score":4},{"name":"amir","score":5},{"name":"asd","score":10}];
 
  $scope.selectRow = function(index){
      if(index == $scope.rowIndex)
        $scope.rowIndex = -1;
        else
          $scope.rowIndex = index;
    }
  });

.active{
  background-color:#a11af0;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">

    <ul class="nav nav-pills" ng-init="catVal = 1">
       <li ng-repeat="item in items" ng-class="{'active':rowIndex == $index }" ng-click="selectRow($index)">
           <a href="">{{item.name}}</a>
        </li>
                       
     </ul>        
</div>