Nested ng-repeats with bootstrap collapse, trouble with $index and ng-init

Question

I have a bootstrap collapse accordion with multiple ng-repeats:

<div class="subdiv-wrapper">
    <div class="panel-group" id="accordion1" ng-repeat="admin in subdivisions" ng-init="subdivIndex = $index">
        <div class="panel panel-default" ng-repeat="admin2 in admin.province">

            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion1" href="#collapse-1{{subdivIndex}}"><span class="span-left">{{ admin2.name }}</span><span class="span-right">{{ admin2.population }}</span></a>
                </h4>
            </div>

            <div id="collapse-1{{subdivIndex}}" class="panel-collapse collapse">
                <div class="panel-body">
                  <h3>districts</h3>
                    <div class="panel-group" id="accordion2">

                        <!-- districts -->
                        <div class="panel panel-default" ng-repeat="admin3 in admin.district" ng-init="subdivIndex2 = $index">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion2" href="#collapse-1-1{{subdivIndex2}}"><span class="span-left">{{ admin3.name }}</span><span class="span-right">{{ admin3.population }}</span></a> 
                                </h4>
                            </div>
                            <!-- communes -->                           
                            <div id="collapse-1-1{{subdivIndex2}}" class="panel-collapse collapse">
                                <div class="panel-body">                                    
                                    <div ng-repeat="admin4 in admin3.commune"><span class="span-left">{{ admin4.name }}</span><span class="span-right">{{ admin4.population }}</span></div>
                                </div>
                            </div>
                        </div>                         
                    </div>
                </div>
            </div>
        </div>
    </div>

I have a nested array in my angular controller:

 $scope.subdivisions = [
     //start province: adrar
     { "province": [{"name":"Adrar","population":"123"}], "district": [

        // district: adrar
        { "name":"Adrar","population":"123","commune":[
            {"name":"Adrar","population":"123"},
            {"name":"Bouda","population":"123"},
            {"name":"Ouled Ahmed Timmi","population":"123"}
        ]},
        // district: aoulef
        { "name":"Aoulef","population":"123","commune":[
            {"name":"Akabli","population":"123"},
            {"name":"Aoulef","population":"123"},
            {"name":"Timokten","population":"123"},
        ]},
        // district: aougrout
        { "name":"Aougrout","population":"123","commune":[
            {"name":"Aougrout","population":"123"},
            {"name":"Deldoul","population":"123"},
            {"name":"Metarfa","population":"123"}
        ]},

     ]}, //end province: adrar

      //start province: algiers
     { "province": [{"name":"Algiers","population":"123"}], "district": [

        // district: bab el oued
        { "name":"Bab El Oued","population":"123","commune":[
            {"name":"Bab El Oued","population":"123"},
            {"name":"Casbah","population":"123"},
            {"name":"Bains Romains","population":"123"}
        ]},
        // district: baraki
        { "name":"Baraki","population":"123","commune":[
            {"name":"Baraki","population":"123"},
            {"name":"Les Eucalyptus","population":"123"},
            {"name":"Sidi Moussa","population":"123"}
        ]},
        // district: Bir Mourad Raïs
        { "name":"Bir Mourad Raïs","population":"123","commune":[
            {"name":"Bir Mourad Raïs","population":"123"},
            {"name":"Hydra","population":"123"},
            {"name":"Saoula","population":"123"}
        ]},

     ]}, //end province: algiers

     ]; // end subdivisions 

My accordion has each province then each of that province's divisions and then each of the individual divisions' communes.

I'm trying to get each collapsible panel to open and close correctly. So I tried adding $index (and $parent.$index to the nested ng-repeat) but that didn't work. Then I added 2 ng-init:

• First one - ng-init="subdivIndex = $index"
• Second one - ng-init="subdivIndex2 = $index"

This is getting closer but still not working correctly (the first province opens and its nested divisions and communes and the second province opens but not its nested divions and communes). How can I get all panels to open independently?

I hope this makes sense - if not i'll make a plunker to demonstrate.

Answer 1

I found the solution:

<div class="subdiv-wrapper">
    <div class="panel-group" id="accordion1_{{subdivIndex}}" ng-repeat="admin in subdivisions" ng-init="subdivIndex = $index">
        <div class="panel panel-default" id="accordion1_{{subdivIndex}}" ng-repeat="admin2 in admin.province">

            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="accordion1_{{subdivIndex}}" href="#collapse-1{{subdivIndex}}" aria-expanded="false" class="collapsed"><span class="span-left">{{ admin2.name }}</span><span class="span-right">{{ admin2.population }}</span></a>
                </h4>
            </div>

            <div id="collapse-1{{subdivIndex}}" class="panel-collapse collapse">
                <div class="panel-body">
                  <h3>districts</h3>
                    <div class="panel-group" id="accordion2_{{subdivIndex}}_{{subdivIndex2}}">

                        <!-- districts -->
                        <div class="panel panel-default" ng-repeat="admin3 in admin.district" ng-init="subdivIndex2 = $index">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion2_{{subdivIndex}}_{{subdivIndex2}}" href="#collapse-1-1_{{subdivIndex}}_{{subdivIndex2}}"><span class="span-left">{{ admin3.name }}</span><span class="span-right">{{ admin3.population }}</span></a> 
                                </h4>
                            </div>
                            <!-- communes -->                           
                            <div id="collapse-1-1_{{subdivIndex}}_{{subdivIndex2}}" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <!-- display 'communes' title here -->
                                    <div ng-repeat="admin4 in admin3.commune"><span class="span-left">{{ admin4.name }}</span><span class="span-right">{{ admin4.population }}</span></div>
                                </div>
                            </div>
                        </div>                         
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Now I'm just trying to figure out how to get all panels to close when another one is opened...