Angular: connected sortble in repeat loop w/ broken clone

Drag drop working with loops. Clone not Working

by GaryM

HTML

<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<link rel="stylesheet" href="http://layout.jquery-dev.net/lib/css/layout-default-latest.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script src="http://code.angularjs.org/1.2.7/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js" type="text/javascript"></script>
<body  ng-app="myApp" ng-controller="MyCtrl">
    <ol ng-repeat="list in modelData" ng-model="modelData" id="item-list" >
        <li >{{list.header}}</li>
        <ol ui-sortable="sortableOptions" ng-model="list.data" class="sort" ng-repeat="item in list.data">        
            <li id="item" >{{item}}</li>
        </ol>
    </ol>
    <div ng-model="list.data" style="clear:both;">{{modelData[0]}}</div>
    <div ng-model="list.data" style="clear:both;">{{modelData[1]}}</div>
    <div ng-model="list.data" style="clear:both;">{{modelData[2]}}</div>
</body>

CSS

#item {
    padding: 5px;
    border: 1px solid #999;
    background: #eee;
    margin: 5px;
    cursor: move;
}
#item-list {
    padding: 5px;
    border: 1px solid #999;
    background: #eee;
    margin: 5px;
    float:left;
}

.sortSrc, .sortTgt {
    float:left;
}

JavaScript

var myApp = angular.module('myApp', ['ui.sortable']);

myApp.controller('MyCtrl', function($scope) {
    $scope.sortableOptions = {
        connectWith: ".sort",
        helper: 'clone',
        scroll: false
    };
    $scope.modelData=[{header:"Source1",data:["Src1 Item 1", "Src1 Item 2", "Src1 Item 3", "Sr1c Item 4", "Src1 Item 5"]},{header:"Source2",data:["Src2 Item 1", "Src2 Item 2", "Src2 Item 3", "Src2 Item 4", "Src2 Item 5"]},
                      {header:"Target",data:["Tgt Item 1", "Tgt Item 2"]}];
    $scope.srcData= $scope.modelData[0];
    $scope.tgtData= $scope.modelData[1];
});