AngularJS - ドラッグ可能なツリーの作成方法

Question

私は、ユーザーが葉をドラッグアンドドロップできる構造のようなツリーを作成したいと思います。

myapp = angular.module 'myapp', ['ui'] 

myapp.controller 'controller', ($scope) -> 

    $scope.items = [ 
     {id: 1, name: 'Item 1', children: [ 
     {id: 5, name: 'SubItem 1.1', children: [ 
      {id: 11, name: 'SubItem 1.1.1', children: []}, 
      {id: 12, name: 'SubItem 1.1.2', children: []} 
     ]}, 
     {id: 6, name: 'SubItem 1.2', children: []} 
     ]}, 
     {id: 2, name: 'Item 2', children: [ 
     {id: 7, name: 'SubItem 2.1', children: []}, 
     {id: 8, name: 'SubItem 2.2', children: []} 
     {id: 9, name: 'SubItem 2.3', children: []} 
     ]}, 
     {id: 3, name: 'Item 3', children: [ 
     {id: 10, name: 'SubItem 3.1', children: []} 
     ]} 
    ] 

angular.bootstrap document, ['myapp'] 

CoffeeScriptの

HTML

<div ng:controller="controller"> 
    <ul ui-sortable ng-model="items" ui-options="{connectWith: '.item'}" class="item"> 
    <li ng-repeat="item in items" class="item"> 
     {{ item.name }} 
     <ul ui-sortable ng-model="item.children" ui-options="{connectWith: '.item'}" class="item"> 
     <li ng-repeat="item in item.children" class="item">{{ item.name }}</li> 
     </ul> 
    </li> 
    </ul> 

    <pre>{{ items | json }}</pre> 
</div> 

<script src="http://code.angularjs.org/1.0.2/angular.min.js"></script> 
<script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.min.js"></script> 

をコードでもこのJSFiddleである：私は次のように出発点を持っている私の「本当のオンhttp://jsfiddle.net/bESrf/1/

"コードでは、子供のためのレベルが1つしかないのではなく、 <ul>をテンプレートに追加し、それを再帰的にレンダリングしますが、うまくいきますが、JSFiddleでそれを行う方法が見つかりませんでした。

ng-modelで表されるオブジェクトとサブオブジェクトの配列が変更されても、再帰的にレンダリングしてドラッグアンドドロップできるようにするにはどうすればよいでしょうか？