Angular js & ui sortable

I have nested sortable lists using UI Sortable. The structure is a parent child structure. The parent lists are sortable and the child lists are sortable. Its similar to this: http://jsfiddle.net/9uhfX/2/

<ul ui-sortable="vm.sortableOptions" class="list-group ui-sortable">
       <li  class="list-group-item">
            <div class="row">
                <div class="col-xs-12">
                    <ul ui-sortable="vm.sortableOptions2" class="list-group>
                       <li class="list-group-item" >
                            <div class="dd-handle row">
                                <div class="col-xs-1 ng-binding">1 </div>
                                <div class="col-xs-3 ng-binding">code-0</div>
                                <div class="col-xs-7 ng-binding">item 0</div>
                            </div>
                        </li><li class="list-group-item">
                            <div class="dd-handle row">
                                <div class="col-xs-1 ng-binding">2 </div>
                                <div class="col-xs-3 ng-binding">code-1</div>
                                <div class="col-xs-7 ng-binding">item 1</div>
                            </div>
                        </li>
                    </ul>



                </div>
            </div>
        </li>
</ul>

However I want to prevent parent items being dragged into child lists and child items being dragged as parents. All the child lists are connected so you can drag between the child lists as well. Basically you should only be able to drag items into the same level.

I can't figure out how to prevent the parent items being dropped into the child lists. Anyone have any ideas?

When I drag from a parent list into a child list I get the error

Uncaught TypeError: Cannot read property 'ngModel' of null

This fiddle http://jsfiddle.net/HG8k6/ has exactly my problem. You can drag a parent into a child list.