使用ng-repeat和ng-init渲染文件夹树

Question

HTML代码  

 I have html code as below which renders folders with children folders, 
 when down arrow is clicked then the children will be displayed 
 

 <ul update-root-folders folders="vm.folders">
    <li ng-repeat="folder in vm.folders" ng-init="folder.childFolders = 
      vm.getChildrenFodlers(fodler.child_folderIds)">
     <div ng-show="vm.shouldShowChildren[folder.id]" ng-
             click="vm.shouldShowChildren[folder.id] != 
           vm.shouldShowChildren[folder.id]">right arrow</div>
     <div ng-show="!vm.shouldShowChildren[folder.id]" ng-
             click="vm.shouldShowChildren[folder.id] != 
           vm.shouldShowChildren[folder.id]">down arrow</div>
     </li>`
     <ul ng-show="vm.shouldShowChildren[folder.id]">
       <li ng-repeat="childFolder in vm.childFolders" ng-
                  init="childFolder.childFolders = 
             vm.getChildrenFodlers(childFolder.child_folderIds)">
       </li>
     </ul>
   </ul>

 Here dynamically childFolders is getting added to each fodler or each 
 child fodlers. So I had to do update the vm.folders in one scenario in 
 update-root-fodlers directive as below. 
 

指令代码

 scope.$on('updateRootFolderIterations', function(event, data){
                console.log(scope.folders);
                console.log(data);
                var iterations = scope.iterations;
                if(data.isFolderDroppedInRoot) {
                    scope.folders = [];
                    var iterationContent = angular.fromJson($window.localStorage.getItem('folders'));
                    if(data.newFolder) {
                        data.newFolder.forEach(function(iteration) {
                             var droppedRootFolder = iterationContent.filter(function(item) {
                                return item._id === iteration.id;
                              });
                              if(droppedRootFolder.length > 0) {
                                 scope.iterations.push(droppedRootFolder[0]);
                              }
                        });
                    }
                } 
                else {
                    var indexOfMovedFolder = scope.iterations.findIndex(function(iteration, index) {
                        return iteration._id === data.newFolder[0].id;
                    });
                    if(indexOfMovedFolder > -1) {
                        scope.iterations.splice(indexOfMovedFolder, 1);
                    }
                }
                scope.$apply();
            });

 
 During page load everything working, But based on some user action the 
 event will be broadcasted then the folders are getting assigned with 
 new folder content, here the ng-repeat rendering new fodlers but 
 not able to get the children while ng-repeat is rendering.
 How to load the children (infinite depth is possible) here. Any better 
 -way of creating children object into each folder while ng-repeat is 
 happening. And which should update/get children when we do scope.$apply()