Angularjs How to Toggle div's in ng-repeat?

Question

I am working in angularjs and I need to toggle div in ng-repeat but its not working fine. jQuery click is also not working on this. On click of pregroupMem() anchor tag I am calling this function. and data id coming from this function and I am using this as membersList in listdiv div. I need to toggle this div on click of "custom-cn" anchor tag.There are multiple lists and in each of these lists there are there multiple listdivs . I need to toggle the particular div on the click of anchor tag of list.

This is my js to get all groups of members. 

 localStorageService.set('grpOpen', grps.openGroups);
 localStorageService.bind($scope, 'grpOpen');

    grs.init = init;
    function init()
    {
        getMyData();    
    }   
    $scope.data = null;

    DataService.getMyData().then(function successCallback(response) 
    {
        $scope.data = response.data.results;
        $scope.grpOpen.length = 0;
        $scope.grpOpen.push({'data': response.data.results});
    },function errorCallback(response) {

    }); 

This is js to get all members list of a group.I have updated this according to your

$scope.open = -1;
$scope.pregroupMem  = function(index,id,e){ 

        $rootScope.membersList = '';
        // $rootScope.membersList.length = 0;
        $scope.loading= true;

        DataService.getGrpMem(id).success(function (data) {
            $rootScope.membersList = data.results;
            $scope.data[index].shown = !$scope.data[index].shown;

            if( $scope.open >= 0 && $scope.data[$scope.open] ){
                $scope.data[$scope.open].shown = !$scope.data[$scope.open].shown;
            }
            if( $scope.open !== index ){
                $scope.data[index].shown = !$scope.data[index].shown;
            } 
            $scope.open = index;


        }).catch(function (err) {
              // Log error somehow.
        })
        .finally(function () {
          // Hide loading spinner whether our call succeeded or failed.
          $scope.loading = false;
        });

    }

<ul>
<li ng-repeat="groupsw in grpOpen[0].data track by $index"> 
  <a ng-click="pregroupMem($index,groupsw.grpId,$event)" class="custom-cn" href="javascript:;">{{ groupsw.grpName }}</a>

    <div class="listdiv"> 
        <ul class="userlist">
            <li ng-repeat="mymembers in membersList">
            <a class="add_user" href="javascript:;"><i class="fa fa-user-plus"></i></a>
            <div class="userlist">
            <span class="usnermalissval" ng-if="mymembers.Name != null">{{mymembers.Name}}</span>

            </div>
            </li>
        </ul>
    </div>

</li>  
</ul>

Answer 1

You can do it in following way:

 angular .module('app', []) .controller('MyController', function($scope) { $scope.data = [ {grpId: 1, grpName: 'One'}, {grpId: 2, grpName: 'Two'}, {grpId: 3, grpName: 'Three'}, {grpId: 4, grpName: 'Four'}, {grpId: 5, grpName: 'Five'} ] $scope.open = -1; $scope.pregroupMem = function(index, id, e) { e.preventDefault(); if( $scope.open >= 0 && $scope.data[$scope.open] ){ $scope.data[$scope.open].shown = !$scope.data[$scope.open].shown; } if( $scope.open !== index ){ $scope.data[index].shown = !$scope.data[index].shown; } $scope.open = index; } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app"> <ul ng-controller="MyController"> <li ng-repeat="groupsw in data"> <a ng-click="pregroupMem($index, groupsw.grpId, $event)" class="custom-cn" href="javascript:;">{{ groupsw.grpName }}</a> <div class="listdiv" ng-show="groupsw.shown"> <ul class="userlist"> This is a child div of grpId: {{groupsw.grpId}} </ul> </div> </li> </ul> </div>