Show Category hierarchy using AngularJS - angularjs

Question

I wanna show a category hierarchy data and I use angularJS with ng-repeat and ng-if.Here's to my demo file:
<div ng-app="" ng-controller="DanhMucController">
<ul>
<li ng-repeat="danhmuc in DanhMucList" ng-if="danhmuc.depended==0">{{danhmuc.name}}
<ul>
<li ng-repeat="danhmuc in DanhMucList" ng-if="danhmuc.depended==2">
{{danhmuc.name}}
<ul ng-repeat="danhmuc in DanhMucList" ng-if="danhmuc.depended==4">
<li>{{danhmuc.name}}</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
controller:
<script>
function DanhMucController($scope, $http) {
var url = "category.txt";
$http.get(url).success(function(response) {
$scope.DanhMucList = response;
});
}
</script>
this file category data :
[{
"id": "1",
"name": "Parent1",
"depended": "0"
}, {
"id": "2",
"name": "Parent2",
"depended": "0"
}, {
"id": "3",
"name": "Parent3",
"depended": "0"
}, {
"id": "4",
"name": "ChildA",
"depended": "1"
}, {
"id": "5",
"name": "ChildB",
"depended": "2"
}, {
"id": "6",
"name": "ChildC",
"depended": "3"
}, {
"id": "7",
"name": "grandChildA",
"depended": "4"
}, {
"id": "8",
"name": "grandChildB",
"depended": "5"
}, {
"id": "9",
"name": "grandChildC",
"depended": "6"
}, {
"id": "10",
"name": "grandChildD",
"depended": "5"
}, {
"id": "11",
"name": "grandChildE",
"depended": "6"
}, {
"id": "12",
"name": "grandChildF",
"depended": "3"
}]
category Image
But I can not define the id of parent so it dont show data which I need .It must display:
-Parent 1 contain ChildA.
-Parent 2 contain ChildB.
-Parent 3 contain ChildC.
Everyone can suggest me a solution for my issues. Thanks all

Answer 1

you can do something like this here.
I would suggest though you arrange your data better instead of looping over the same data 3 times.