Drag and drop ordering with ng-repeat - angularjs

Question

This is my html:
<div ng-repeat="activity in activities">
<button id="{{activity.id}}" activity=activity draggable>
{{activity.name}}
</button>
</div>
<div droppable handle="handleDrop(activity)">
<div ng-repeat="activity in getAll()">
<button>
{{activity.name}}
</button>
</div>
</div>
As you see I have two directives, draggable and droppable. The draggable directive sends the activity data to the droppable directive via dataTransfer. On the event 'drop', the data (the activity JSON) is added to a controller and getAll() returns all dropped activities. Now, this works. But I cannot change the order of these activities, since the drop only pushes the activity to a list. What should I do if I want to be able to put one activity in between two activities, or perhaps rearrange them?
EDIT:
app.directive('droppable', function () {
return {
scope: {
handle: '&'
},
link: function (scope, element) {
element.on('dragover', function (e) {
e.preventDefault();
});
element.on('drop', function (e) {
e.preventDefault();
var activity = JSON.parse(e.originalEvent.dataTransfer.getData("text"));
scope.handle({activity: activity});
scope.$apply();
});
}
};
});
app.directive('draggable', function () {
return {
scope: {
'activity' : '='
},
link: function (scope, element) {
var el = element[0];
el.draggable = true;
el.addEventListener('dragstart', function (e) {
e.dataTransfer.setData("text", JSON.stringify(scope.activity));
}, false);
}
}
});

Answer 1

I found a solution myself. What I did was to add this to the html draggable element:
data-index="{{$index}}"
Then, in the draggable directive in the dragenter event, I added:
if(e.target.hasAttribute('draggable')) {
e.target.classList.add('insert');
}
Where the insert class adds some styling to show that the user is about to drop between two elements. And in the drop event, I added:
var i = e.target.getAttribute('data-index');
if (i !== null) {
scope.handle({activity: activity, index: i});
} else {
scope.handle({activity: activity});
}
scope.$apply();
This solved it for me. Perhaps it could be useful to someone.