How to drag particular div on ng repeat in angularjs - angularjs

Question

I am preparing charts on repeat.
I have applied drag properties to <div>, I am able to drag the div element but if multiple charts are added to that div on ng-repeat it is misbehaving, with only the first div dragging if I drag any other chart.
This is my code (I am using Dev Extreme to prepare charts using Angularjs)
<div style="background-color:white;" id="myElement" dx-dragenter="dragEnter($event)" dx-dragleave="dragLeave($event)" >
<div ng-repeat="chart in FinalPieData" id="innerElement" dx-drag="dragged($event)" dx-dragstart="dragStarted($event)" dx-dragend="dragStopped($event)">
<div class="col-lg-6" ng-repeat="pie in chart" ng-mouseleave="HideTitlePieOnLeave()">
<div id="ibtMulPie" class="ibox float-e-margins">
<div ng-mouseover="ShowTitlePie(pie)">
<div class="demo-container">
<div id="pie" dx-pie-chart="pie"></div>
</div>
</div>
</div>
</div>
</div>
</div>
drag code JS
//pie
$scope.dragStarted = function () {
$("#innerElement").css("background-color", draggedColor);
initialTop = parseInt($("#innerElement").css("top"));
initialLeft = parseInt($("#innerElement").css("left"));
initialPointerY = arguments[0].clientY;
initialPointerX = arguments[0].clientX;
};
$scope.dragged = function () {
$("#innerElement").css("top", initialTop + arguments[0].clientY - initialPointerY);
$("#innerElement").css("left", initialLeft + arguments[0].clientX - initialPointerX);
};
$scope.dragStopped = function () {
$("#innerElement").css("background-color", "green");
};
$scope.dragEnter = function () {
draggedColor = "red";
$("#innerElement").css("background-color", draggedColor);
};
$scope.dragLeave = function () {
draggedColor = "yellow";
$("#innerElement").css("background-color", draggedColor);
};

Answer 1

The repeated divs all have the same id.
You can make all id's unique like so:
ng-repeat="chart in FinalPieData track by $index" id="innerElement{{$index}}"
Now you can fetch the element using the event that you pass into the drag functions, or pass the id in as well and use that in your selector like so:
In html
dx-dragstart="dragStarted($event, $index)"
And in controller
$scope.dragStarted = function (event, index) {
var elementid = "#innerElement" + index;
$(elementid).css("background-color", draggedColor);
initialTop = parseInt($(elementid).css("top"));
initialLeft = parseInt($(elementid).css("left"));
initialPointerY = arguments[0].clientY;
initialPointerX = arguments[0].clientX;
};