title: How can I put 2nd level accordion by using ionic and angularjs?
body: <p>I am able to do one level of accordion using angularjs but I want one more level, please help me how can I do this..</p>
  
  <p>How do I create a multiple-level (embedded) accordian using Angular?</p>
  
  <p>The layout should have collable sections with this hierarchy:</p>
  
  <p>Controller.js...</p>
  
  <pre><code>ctrl.controller('MyCtrl', function($scope) {
            $scope.groups = [];
            for (var i=0; i&lt;10; i++) {
              $scope.groups[i] = {
                name: i,
                items: []
              };
              for (var j=0; j&lt;3; j++) {
                $scope.groups[i].items.push("Doctor" + '-' + j);
              }
  
            }
            $scope.toggleGroup = function(group) {
              if ($scope.isGroupShown(group)) {
                $scope.shownGroup = null;
              } else {
                $scope.shownGroup = group;
              }
            };
            $scope.isGroupShown = function(group) {
              return $scope.shownGroup === group;
            };
  
          });
  </code></pre>
  
  <p>test.html...</p>
  
  <pre><code>&lt;ion-list id = "background" ng-controller="MyCtrl"&gt;
          &lt;div id = "background" ng-repeat="group in groups"&gt;
            &lt;ion-item class="item-stable item item-avatar" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}"&gt;
              &lt;img ng-src = "img/1.png"/&gt;
              Clinic {{group.name}}
              &amp;nbsp;
              &lt;p&gt;Address:&lt;/p&gt; 
            &lt;/ion-item&gt;
            &lt;ion-item class="item-accordion"
              ng-repeat="item in group.items"
              ng-show="isGroupShown(group)"&gt;
              {{item}}
            &lt;/ion-item&gt;
          &lt;/div&gt;
        &lt;/ion-list&gt;
  </code></pre>