How to make AngularUI sortable connect lists in different divs?

Question

I'm trying to get AngularUI sortable connect two lists located in separate divs.

Can someone please explain what the issue is and why one method works and the other doesn't ? and what I need to do to fix it ?

I did get the lists connected if the divs are both siblings of the element defining the sortable:

<div ui-sortable="sortableOptions" ng-repeat="list in modelData" ng-model="list" class="sort">
    <div id="item-list" ng-repeat="item in list">{{item}}</div>
</div>

jsfiddle: http://jsfiddle.net/GaryM/PHvVS/

This is the method I need to work:

<div class="sortSrc"  style="display:inline;">
    <ol ui-sortable="srcSortableOptions" ng-model="srcData">
        <li ng-repeat="item in srcData">{{item}}</li>
    </ol>
</div>
<div class="sortTgt"  style="display:inline;">
    <ol ui-sortable="tgtSortableOptions" ng-model="tgtData">
        <li ng-repeat="item in tgtData">{{item}}</li>
    </ol>
</div> 

jsfiddle: http://jsfiddle.net/GaryM/2AnLU/

Help is appreciated

Answer 1

remove parent divs for ol's. Here works just fine

Please see the refer how they do in official github of ui-sortable

<div>
  <ol ui-sortable="srcSortableOptions" ng-model="srcData" class="sortSrc"  style="display:inline;">
    <li ng-repeat="item in srcData">{{item}}</li>
  </ol>
  <ol ui-sortable="tgtSortableOptions" ng-model="tgtData" class="sortTgt"  style="display:inline;">
    <li ng-repeat="item in tgtData">{{item}}</li>
  </ol>
</div>