Nested ng-repeat load dynamically from server

Question

I've an issue in my angular js ng-repeat. One of my page I have to show the data like parent and its child.

 

Parent 1

Child 1 - 1

Child 1 - 2

Parent 2

Child 2 - 1

Child 2 - 2

 

Child data only loading when user click on the corresponding parent. When user click on the parent I'm passing the parent ID to a function for getting the child data. But the problem is when I give the json array to the inner ng-repeat, It replacing all the inner ng-repeat. For Eg: When i click on the parent 2 I'm getting the result like this

 

Parent 1

Child 2 - 1

Child 2 - 2

Parent 2

Child 2 - 1

Child 2 - 2

 

The child's of parent 1 was also change with child's of parent 2. I'm also pasting my code below

myApp.controller("MyDriveCtrl", function ($scope, $http, MyDriveModel) {
$scope.CabinetList = {};
$scope.DrawList = {};
MyDriveModel.UserCabinetList($scope, UserCabinetListSuccess);
this.showDraw = false;
$scope.getDrawList = function (Cabinet) {
console.log('I am here : ' + Cabinet.cabNumber);
if (this.showDetails = !this.showDetails) {
if (!this.invoices) { MyDriveModel.UserDrawList(UserDrawListSuccess, Cabinet.cabNumber); } } } /* Success Functions */ function UserCabinetListSuccess(Success) { $scope.CabinetList = Success.data; console.log(JSON.stringify($scope.CabinetList)); } function UserDrawListSuccess(Success) { $scope.DrawList = Success.data; console.log(JSON.stringify($scope.DrawList)); }
});