Q:

nested ng-repeat always shows the last item in the array

I have a requirement of showing a list of Categories and Subcategories in two tables. For showing the Category data, in HTML :
 <tr ng-repeat="item in addNodeCtrl.categoryData track by $index">
 <td>{{item.name}}</td>
 <td>
 <input type="checkbox" ng-model="item.active">

Here it will show the Category and Category active/Inactive switch in the first table.
In the second table, I need to show only the categories in the first table that have been made active through the switch. It will show the subcategories and its active/inactive status. HTML below:
  <table ng-repeat="item in ctrl.categoryData | filter:{active:true} track by $index" ng-init="ctrl.getsubCategory(item.id)">
      <tbody>
        <tr>
          <td>{{item.name}}></td>
            <td>
                <table>
                <tr ng-repeat="item1 in ctrl.subCategoryData track by $index">
                     <td>{{item1.name}}</td>     
         <td><input type="checkbox" ng-model="item1.active">    
                     </td>
                </tr>
                </table>
           </td>
           </tr>
        </tbody>
        </table>

item.id is the category ID and the getsubCategory function in JS is given below
JS Below:
function getsubCategory(categoryid) {

  getsubcategservice.getsubcateg({categoryid: categoryid},{})
            .$promise.then(success,failure);

            function success(response){
                    vm.subCategoryData = response.data.subCategorys; 
                }

                               function failure(reason){
                            //error message
                }

}

The issue here is that when i make the first category switch active , the subcategories are populated, but when the second category switch is made active, the first set of subcategories also changes and lists the subcategories for the second category that was made active.
Please find the JSON data for Category below:
    {
  "categoryInfoes": {
    "categoryInfo": [
      {
        "active": "true",
        "description": "category 1",
        "id": "1",

      },

      {
        "active": "true",
        "description": "category 2",
        "id": "2",
      },
      {
        "active": "true",
        "description": "category 3",
        "id": "3",
      }
    ]
  }
}

Please find the JSON for subcategory below:
{
  "subcategoryDetails": {
    "subCategorys": [
      {
        "active": "true",
        "name": "1 - subcategory 1",
      },
      {
        "active": "true",
        "name": "1 - subcategory 2",
      },
      {
        "active": "true",
        "name": "1 - subcategory 3",
      },
      {
        "active": "true",
        "name": "1 - subcategory 4",
      }
    ],
    "active": "true",
    "description": "category 1",
    "id": "1",   
  }
}

{
  "subcategoryDetails": {
    "subCategorys": [
      {
        "active": "true",
        "name": "2 - subcategory 1",
      },
      {
        "active": "true",
        "name": "2 - subcategory 2",
      },
      {
        "active": "true",
        "name": "2 - subcategory 3",
      },

    ],
    "active": "true",
    "description": "category 2",
    "id": "2",   
  }
}

{
  "subcategoryDetails": {
    "subCategorys": [
      {
        "active": "true",
        "name": "3 - subcategory 1",
      },
      {
        "active": "true",
        "name": "3 - subcategory 2",
      },
      {
        "active": "true",
        "name": "3 - subcategory 3",
      },

    ],
    "active": "true",
    "description": "category 3",
    "id": "3",   
  }
}

Could anyone help me out on this?
UPDATE:
I have created a Plunker to demonstrate this:
https://plnkr.co/edit/LqioF8hugsjJCOfmj9Vb?p=preview
If you see in the Plunk, If you check "Category 2" after checking "Category 1", the subcategories get updated for both Category 1 and 2. Same happpens for Category 3. The Subcategory for the last item is updated everywhere.
Please help me out on this and let me know what I am doing wrong,

A:

The problem here is that you are loading the subcategories into scope, and then changing the value in scope each time a category is selected.  As far as Angular is concerned, you just wanted to repeat and display that information multiple times.  One way to solve this would be to nest the subcategories into their parent category object and bind the ng-repeat to the child sub-categories of their parent.
You can even still load these on the fly when they are selected, if the amount of data is prohibitive to load everything at once.
Let me know if that makes sense.
-- Edit --
Since I haven't heard from you in a day, I decided to add a plunkr to show you what I was talking about:
https://plnkr.co/edit/mquYiX?p=preview
Here is the controller:
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope,$http) {

  // I made the subcategory data an array
  $scope.subcategoryData = [];

    $http.get("data.json")
    .then(function(response) {
        $scope.categoryData = response.data;
    });

$scope.getsubCategory = function (categoryid) {
  $http.get("data"+categoryid+".json")
      .then(function(response) {
        // the subcategories are keyed on the category Id
        // and updated each time the method is called
        $scope.subcategoryData[categoryid] = response.data;
        console.log($scope.subcategoryData[categoryid]);
      })
    };  

});

And here is your html:
<table ng-repeat="item in categoryData.categorydetail | filter:{active:true} track by $index" >
  <tbody>
    <tr>
      <td>{{item.name}}></td>
        <td ng-init="getsubCategory(item.id)">
          <table>
            <!-- here, I key the subcategoryData in the loop on the Item id.  Voila, now it works -->
            <tr ng-repeat="item1 in subcategoryData[item.id].subcategoryinfo track by $index">
             <td>{{item1.subname}}</td>     
             <td><input type="checkbox" ng-model="item1.subactive"></td>
            </tr>
          </table>
        </td>
    </tr>
  </tbody>
 </table>

