javascript - ng-repeat, link item with another arrays item -

i trying create unsorted list (organizational structure) 2 data arrays (department, employees) use ng-repeat dynamically display departments unable populate each department employees. both of arrays have common departmetntid field

here 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> 

and here jsons

"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": [.....