Untitled

<!DOCTYPE html>
<html ng-app="app" >

  <head>
    <script data-require="angular.js@1.5.7" data-semver="1.5.7" src="https://code.angularjs.org/1.5.7/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    
    <div ng-controller="ctrl">
    <ul >
        <li ng-repeat="a in DanhMucList" ng-if="a.children.length > 0">{{a.name}}
           <ul>
               <li ng-repeat="b in a.children" ng-if="b.children.length > 0">
                {{b.name}}
                <ul ng-repeat="c in b.children">
                    <li>{{c.name}}</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>
  </body>

</html>

// Code goes here

var app = angular.module('app',[]);
app.controller('ctrl',function($scope){
  $scope.DanhMucList = [
  {
    "id": "1",
    "name": "Parent1",
    "children": [
      {
        "id": "4",
        "name": "ChildA",
        "children": [
          {
            "id": "7",
            "name": "grandChildA"
          }
        ]
      }
    ]
  },
  {
    "id": "2",
    "name": "Parent2",
    "children": [
      {
        "id": "5",
        "name": "ChildB",
        "children": [
          {
            "id": "8",
            "name": "grandChildB"
          },
          {
            "id": "10",
            "name": "grandChildD"
          }
        ]
      }
    ]
  },
  {
    "id": "3",
    "name": "Parent3",
    "children": [
      {
        "id": "6",
        "name": "ChildC",
        "children": [
          {
            "id": "9",
            "name": "grandChildC"
          },
          {
            "id": "11",
            "name": "grandChildE"
          },
          {
            "id": "12",
            "name": "grandChildF"
          }
        ]
      }
    ]
  }
]
});

/* Styles go here */