Get positions of divs after drag and drop in a container using dragula

Question

I am a beginner in angularJS. I am trying to get the changes in position after the drag and drop of the respective divs in the container has been completed. I tried a few code snippets given at their website, but couldn't find out the solution.

Below are my code snippets used:

Template used:

<div class='container' dragula='"first-bag"'>
    <div>You can move these elements between these two containers</div>
    <div>Moving them anywhere else isn't quite possible</div>
    <div>There's also the possibility of moving elements around in the same container, changing their position</div>
</div>

And in my controller:

$scope.$on('first-bag.drag', function (e, el) {
    el.removeClass('ex-moved');
    console.log(e);
    console.log(el);        
});

$scope.$on('first-bag.drop', function (e, el) {
    el.addClass('ex-moved');
    console.log(e);
    console.log(el.id);  
});

$scope.$on('first-bag.over', function (e, el, container) {
    container.addClass('ex-over');
    console.log(e);
    console.log(el);       
});

$scope.$on('first-bag.out', function (e, el, container) {
    container.removeClass('ex-over');
    console.log(e);
    console.log(el);
});

Can someone please guide me if I am on the right path or am I going wrong anywhere.