Javascript ng重复，将项目链接到另一个项目

我试图从两个数据数组（部门、员工）创建未排序的列表（组织结构），我使用ng repeat动态显示部门，但我无法用员工填充每个部门。两个数组都有公共departmentId字段

这是dummy.html

<div ng-app="myApp" ng-controller="myCtrl">  

<div ng-repeat="dept in myData" >  
<ul class="list">
<%--level 1--%>
<li>{{dept.ouName}}
<span ng-if="dept.children.length > 0">
<ul>
    <%--level 2--%>
    <li ng-repeat="a in dept.children">{{a.ouName}}
        <%--level 3--%>         
        <span ng-if="a.children.length > 0">
        <ul>
        <li ng-repeat="b in a.children">{{b.ouName}}
            <%--level 4--%>
            <span ng-if="b.children.length > 0">
            <ul>
            <li ng-repeat="c in b.children">{{c.ouName}}

                <%--level 5--%>
                <span ng-if="c.children.length > 0">
                <ul>
                <li ng-repeat="d in c.children">{{d.ouName}}

                    <%--level 6--%>
                    <span ng-if="d.children.length > 0">
                    <ul>
                    <li ng-repeat="e in d.children">{{e.ouName}}

                        <%--level 7--%>
                        <span ng-if="e.children.length > 0">
                        <ul>
                        <li ng-repeat="f in e.children">{{f.ouName}}

                            <%--level 8--%>
                            <span ng-if="f.children.length > 0">
                            <ul>
                            <li ng-repeat="g in f.children">{{g.ouName}}

                                <%--level 9--%>
                                <span ng-if="g.children.length > 0">
                                <ul>
                                <li ng-repeat="h in g.children">{{h.ouName}}

                                    <%--level 10--%>
                                    <span ng-if="h.children.length > 0">
                                    <ul>
                                    <li ng-repeat="i in h.children">{{i.ouName}}</li>
                                    </ul>
                                    </span>
                                </li>
                                </ul>
                                </span>
                            </li>
                            </ul>
                            </span>
                        </li>
                        </ul>
                        </span>
                    </li>
                    </ul>
                    </span>
                </li>
                </ul>
                </span>
            </li>
            </ul>
            </span>
        </li>
        </ul>
        </span>
    </li>
    </ul>
    </span>
</li>
</ul>
</div>

---

请格式化代码，你应该考虑递归模板。使用当前的方法，如果您应该支持级别100，您会怎么做？因为这使得视图中的逻辑非常繁重，为什么不在控制器（或由控制器调用的单独模块）中格式化数据（即操纵数组），从而有效地创建一个更简单的视图模型，该模型可以更简单地渲染？更容易测试。你能发布你的部门和员工模型吗？请格式化你的代码。你应该考虑一个递归模板。使用当前的方法，如果您应该支持级别100，您会怎么做？因为这使得视图中的逻辑非常繁重，为什么不在控制器（或由控制器调用的单独模块）中格式化数据（即操纵数组），从而有效地创建一个更简单的视图模型，该模型可以更简单地渲染？将更容易测试。您可以发布您的部门和员工模型吗？

"Employees": [
{
  "id": 1,
  "employeeId": "55555",
  "surname": "Surname",
  "firstName": "Firstname",
  "academicTitle": "",
  "gender": "Male",
  "photo": "",
  "LocalOuId": "00000001",
  "department": "dept Name",
       "active": "1"
},.....


"Department"{
  "id": 1,
  "localOuId": "00000000",
  "localOuIdSup": "",
  "ouName": "IT",
  "children": [
{
  "id": 3,
  "localOuId": "00000001",
  "localOuIdSup": "00000000",
  "ouName": "IT2",
  "children": [.....