Using separate model for each column in table ng-repeat - angularjs

Question

I like to create a table. for each column in this table I like to use a different model. So if I drop a element in one of my two columns it should store the element in the model with respect to the column. Here is link to a fiddle page where I tried something. Is that the easiest way to do so?
<div ng-app="myApp" ng-controller="MyCtrl">
<ul>
<li ng-repeat="person in data">
<div data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" jqyoui-draggable="{animate: true, placeholder: 'keep'}" ng-model="person">
{{ person.name }}
</div>
</li>
</ul>
<table >
<tr style="background-color:orange;">
<td ng-model="src" data-drop="true" jqyoui-droppable="{multiple:true, onDrop: 'myDrop'}">Add your items here</td>
<td ng-model="tar" data-drop="true" jqyoui-droppable="{multiple:true, onDrop: 'myDrop'}">Add your items here</td>
</tr>
<tr ng-repeat="person in src track by $index">
<td >{{ person.name }}</td>
<td >{{ tar[$index].name }}</td>
</tr>
</table>
</div>
<script>
var myApp = angular.module('myApp', ['ngDragDrop']);
myApp.controller('MyCtrl', function($scope, $timeout) {
var src = [{
name: 'bob'
}, {
name: 'mary'
}];
var tar = [{
name: 'bob'
}, {
name: 'mary'
}];
$scope.people = [];
$scope.people.src = [];
$scope.people.tar = [];
$scope.data = src;
$scope.hideMe = function() {
return $scope.people.src > 0;
}
$scope.myDrop = function(event, ui) {
console.log($scope.people);
}
});
</script>