javascript - Angular recursive directive and ngRepeat scope -

i'm having problems recursive tree directive in angular, ngrepeat not model in scope reason, below directive's code.

app.controller("pagecontroller", function($scope) { 

this data object:

  $scope.mytree = [{     "name": "apparel",     "checked": false,     "children": [{       "name": "mens shirts",       "children": [{         "name": "mens special shirts",         "children": []       }]     }, {       "name": "womens shirts",       "children": []     }, {       "name": "pants",       "children": []     }]   }, {     "name": "boats",     "children": []   }]; }); 

main directive:

app.directive("treeui", function($compile, $timeout) {   return {     priority: 1001,     replace: false,     transclude: "element",     restrict: "aec",     scope: {       tree: "=ngmodel"     },     link: function(scope, el, attrs, ctrl, transclude) {       var transcludedcontent, compiler, itemelement;        transclude(function(clone, tscope) {         // trying create $scope.treeitem inside ngrepeat         itemelement = clone.find("li").attr("tree-element", "").attr("ng-repeat", "treeitem in tree");         transcludedcontent = clone;         el.after(clone);       });       $compile(itemelement)(scope);     }   }; }); 

child element directive

app.directive("treeelement", function($compile) {   return {     priority: 1002,     replace: false,     restrict: "aec",     compile: function(telement, tattrs) {       return function linker(scope, element) { 

i never scope.treeitem in here

        console.log(scope.treeitem); // gives me undefined         scope.$watch("treeitem", function(newval) {           console.log(newval); // nothing here either         });          // append sub-menu li, if model has children         if (scope.treeitem && scope.treeitem.children.length) {           var childtree = $compile('<ul tree-ui ng-model="treeitem.children"></ul>')(scope);           element.append(childtree);         }       };     }   }; }); 

and how html looks like:

            <ul tree-ui ng-model="mytree">                 <li>                     <a href="">{{treeitem.name}}</a>                 </li>             </ul> 

any advice on what's happening?