text: Q:
  
  how to make list in ionic + angular?
  
  I am trying to make a list with accordion features.
  I try to learn from here and try to make my own problem accordion list.
  I am able to make collapsible list But when I am external object I am not able to make collapsible list. 
  Could you please tell me how to make this list as shown in image when I have external object.
  here is my code:
    $scope.groups = [];
    for (var i=0; i<collect.length; i++) {
      $scope.groups[i] = {
        name: i,
        items: []
      };
      for (var j=0; j<collect.childItems[i].length ; j++) {
        $scope.groups[i].items.push(i + '-' + j);
      }
    }]
  
  A:
  
  You don't really need to push your collect array of items into another array. 
  The codepen you're linking does that cause they're creating a fake array from scratch.  
  You simply have to store your collect into your groups:
  $scope.groups = collect;
  
  Even if you could simply put the array of object straight into you $scope.groups without defining the collect object.
  and change your HTML so that it can loop the correct way:
    <ion-list>
  
      <div ng-repeat="group in groups">
        <ion-item class="item-stable"
                  ng-click="toggleGroup(group)"
                  ng-class="{active: isGroupShown(group)}">
            <div class="row">
                <div class="col">
                    <div class="custIcon"><img ng-src="{{group.iconURL}}" /></div>
                </div>
                <div class="col col-80 listHead">{{group.name}}</div>
                  <div class="col"><div class="item-icon-right"><i class="icon" ng-class="isGroupShown(group) ? 'ion-ios-arrow-up' : 'ion-ios-arrow-down'"></i></div>
                </div>
          </div>
        </ion-item>
        <ion-item class="item-accordion"
                  ng-repeat="item in group.childItems"
                  ng-show="isGroupShown(group)">
            <div class="internalRow">{{item.childName}}</div>
  
        </ion-item>
  
      </div>
    </ion-list>
  
  The ng-repeat here uses the sub-collection childItems existing in the group object:
  <ion-item class="item-accordion"
                  ng-repeat="item in group.childItems"
                  ng-show="isGroupShown(group)">
            <div class="internalRow">{{item.childName}}</div>
  
  </ion-item>
  
  this is the sample you might need.
  UPDATE:
  This is an adaptation with sub-items:
      <ion-list>
  
          <div ng-repeat="group in groups">
  
            <ion-item class="item-avatar item-icon-right" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}">
              <img ng-src="{{group.iconURL}}">
              <div class="item-text-center item-text-wrap">{{group.name}}</div>
              <i class="icon" ng-class="isGroupShown(group) ? 'ion-ios-arrow-up' : 'ion-ios-arrow-down'"></i>
            </ion-item>
  
            <ion-item class="item-accordion item-icon-right" ng-repeat="item in group.childItems" ng-click="toggleSubGroup(item)" ng-show="isGroupShown(group)">
                <div class="item-text-center item-text-wrap">{{item.childName}}</div>
                <i class="icon" ng-class="isSubGroupShown(item) ? 'ion-ios-arrow-up' : 'ion-ios-arrow-down'"></i>
  
                <div class="item-accordion sub-item" ng-repeat="child in item.grandChildren" ng-show="isSubGroupShown(item)">
                    <div class="item-text-center item-text-wrap">{{child.grandChildName}}</div>
                </div>
  
            </ion-item>
  
          </div>
  
      </ion-list> 
  
  We have 2 <ion-item>. The first one controls the second with toggleGroup(group) on ng-click.  
  The second  contains a <div class="item-accordion sub-item"> which is manipulated by its parent via toggleSubGroup(item).
  
  This is the source, just in case someone is interested ... and a codepen as well.
  
  