ng-repeat makes "dragging and dropping multiple" work incorrect

[zaku33]

Hi all, I have the issue like this:

When I dragged the task in Outdoor with current status is "backlog" to "inprogress or complete (depend on my choice)" , it moved the People Development from "backlog" to "inprogress or complete" instead of Outdoor

Here is my code in HTML:

<div ng-repeat="filterOfType in filterOfTypes|filter:thisTypes" >
    <h1> {{filterOfType}} </h1>
<div class="row">
    <!-- Backlog -->
    <div class="col-md-4 col-sm-4 col-xs-12">
        <div class="column margin-fix">
            <h2 class="column-heading-red">backlog</h2>
            <div id="backlog" title="backlog" class="kanban" ng-model='backlog' ui-sortable="sortableOptions">
                <!-- <div id="backlog" title="backlog" class="kanban" ng-model='backlog' data-as-sortable="board.dragControlListeners"> -->
                <!-- Task card -->
                <div class="card draggable" ng-repeat="task in backlog  | filter: { type: filterOfType } " style="overflow: auto;">
                    <div style="float: right; padding-left: 10px;">
                        <p style="font-size: 14px;">
                            <a class="red" title="delete task" ng-click="deleteTask(task.project, task._id)"><i class="fa fa-close"></i></a>
                        </p>
                    </div>
                    <div>
                        <h3><a ui-sref="task({pid: task.project, tid: task._id})">{{task.name}}</a></h3>
                        <p style="margin-bottom: 0px;"><i class="fa fa-calendar"></i> create : {{(task.created | date:'dd/MM/yyyy' : 'UTC')}}</p>                  
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- In-Progress -->
    <div class="col-md-4 col-sm-4 col-xs-12">
        <div class="column margin-fix">
            <h2 class="column-heading-yellow">inprogress</h2>
            <div id="in-progress" title="in-progress" class="kanban" ng-model='inprogress' ui-sortable="sortableOptions">
            <!-- <div id="in-progress" title="in-progress" class="kanban" ng-model='inprogress' data-as-sortable="board.dragControlListeners"> -->
                <!-- Task card -->
                <div class="card draggable" ng-repeat="task in inprogress  | filter: { type: filterOfType }" style="overflow: auto;">
                    <div style="float: right; padding-left: 10px;">
                        <p style="font-size: 14px;">
                            <a class="red" title="delete task" href="" ng-click="deleteTask(task.project, task._id)"><i class="fa fa-close"></i></a>
                        </p>
                    </div>
                    <div>
                        <h3><a ui-sref="task({pid: task.project, tid: task._id})">{{task.name}}</a></h3>
                        <p style="margin-bottom: 0px;"><i class="fa fa-calendar"></i> create : {{(task.created | date:'dd/MM/yyyy' : 'UTC')}}</p>                  
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Complete -->
    <div class="col-md-4 col-sm-4 col-xs-12">
        <div class="column margin-fix">
            <h2 class="column-heading-blue">complete</h2>
            <div id="complete" title="complete" class="kanban" ng-model='complete' ui-sortable="sortableOptions">
            <!-- <div id="complete" title="complete" class="kanban" ng-model='complete' data-as-sortable="board.dragControlListeners"> -->
                <!-- Task card -->
                <div class="card draggable" ng-repeat="task in complete  | filter: { type: filterOfType }" style="overflow: auto;">
                    <div style="float: right; padding-left: 10px;">
                        <p style="font-size: 14px;">
                            <a class="red" title="delete task" href="" ng-click="deleteTask(task.project, task._id)"><i class="fa fa-close"></i></a>
                        </p>
                    </div>
                    <div>
                        <h3><a ui-sref="task({pid: task.project, tid: task._id})">{{task.name}}</a></h3>
                        <p style="margin-bottom: 0px;"><i class="fa fa-calendar"></i> create : {{(task.created | date:'dd/MM/yyyy' : 'UTC')}}</p>                  
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

Do you have any idea to solve this ? Thank you!!!

[zaku33]

var changeStatus = function(task, newStatus) {
ApiService.updateTaskStatus(AuthService.getToken(), task.project, task._id, newStatus)
.then (
function success(response) {},
function error(response) { console.log(response); }
);
}
$scope.sortableOptions = {
connectWith: '.kanban',
stop: function(e, uiP) {
var item = uiP.item.sortable.model;
var fromIndex = uiP.item.sortable.index;
var toIndex = uiP.item.sortable.dropindex;
if (uiP.item.sortable.droptarget != undefined) {
// Task was moved
var dropTarget = uiP.item.sortable.droptarget[0].id;
changeStatus(item, dropTarget);
}
},
};
$scope.thisTypes = '';
$scope.filterOfTypes = ['People Development', 'Outdoor']

My JS code

[thgreasi]

Your ng-repeats should not have filters, as noted in the developer notes in README.

• The items of ng-model must match the indexes of the DOM elements generated by the ng-repeat.
• Filters that manipulate the model (like filter, orderBy, limitTo,...) should be applied in the controller instead of the ng-repeat (refer to the provided examples).