AngularJs, Divide list respective to their headers

Question

I am new to angularJs and wish to rewrite an app in angularJs but am stuck at this :

I have a custom accordion with the following markup:

<div class="accord_main_wrap" ng-controller="catController">
    <div class="accord_item_wrap" ng-repeat="head in heads">
        <p class="accord_head" data-notvisible="true">{{head.text}}</p>
        <div class="accord_content_wrap">
            <ul>
                <li ng-repeat="sub in subs">{{sub.text}}</li> 
            </ul>
        </div>
    </div>
</div>

The controller :

function catController($scope, $http) {
    $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
    $scope.heads = [];
    $scope.subs = [];
    $http.post(apiURL,$.param({maincat:"true"}))
    .success(function(mainCatData,status,headers,config){
        for(var d=0;d<mainCatData.cat.length;d++){
            $scope.heads.push(mainCatData.cat[d]);
        }
        for(var h=0;h<$scope.heads.length;h++){
            $http.post(apiURL,$.param({subcat:$scope.heads[h].id}))
                .success(function(subCatdata,stat,hea,conf){
                        for(var s=0;s<subCatdata.cat.length;s++){
                            $scope.subs.push(subCatdata.cat[s]);
                        }
                });
        }
    });

The Problem :

Its obvious that the each accordion header should have its own sub headings. But as you can see in the above code, the $scope.subs mixes and allocates all the sub headings to all the accordions.

SO how can I allocate the righteous Sub-headings to their respective main-headings ?

Answer 1

Each item in $scope.heads should have a child collection called subs...

function catController($scope, $http) {
    $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
    $scope.heads = [];
    $http.post(apiURL,$.param({maincat:"true"}))
    .success(function (mainCatData) {
        for (var d = 0; d < mainCatData.cat.length; d++) {
            var head = mainCatData.cat[d];
            $scope.heads.push(head);
            getSubs(head);
        }
    });

    function getSubs(head) {
        head.subs = [];
        $http.post(apiURL, $.param({subcat: head.id}))
            .success(function (subCatdata) {
                    for (var s = 0; s < subCatdata.cat.length; s++) {
                        head.subs.push(subCatdata.cat[s]);
                    }
            });
    }
}