Javascript 角度递归指令和重复作用域

我在angular中使用递归树指令时遇到问题，由于某种原因，我的ngRepeat无法在范围内获取模型，下面是我的指令代码

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

这是我的数据对象：

  $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": []
  }];
});

主要指令：

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 to 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);
    }
  };
});

子元素指令

app.directive("treeElement", function($compile) {
  return {
    priority: 1002,
    replace: false,
    restrict: "AEC",
    compile: function(tElement, tAttrs) {
      return function linker(scope, element) {

我从来都没有机会看到他们在这里

        console.log(scope.treeItem); // gives me undefined
        scope.$watch("treeItem", function(newVal) {
          console.log(newVal); // nothing here either
        });

        // This will append a sub-menu to my 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);
        }
      };
    }
  };
});

console.log（scope.treeItem）；//给我未定义的
范围$watch（“treeItem”，函数（newVal）{
console.log（newVal）；//这里也没有内容
});
//如果模型有子菜单，这将在我的li中附加一个子菜单
if（scope.treeItem&&scope.treeItem.children.length）{
var childTree=$compile（'
）（范围）；
元素。追加（子树）；
}
};
}
};
});

这就是我的html的样子：

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

有什么建议吗