如何避免使用ng-repeat重复项目并丢弃angularjs？

您能给我一些问题的建议吗？我有下一种情况：

1.我从服务器加载项目列表并在容器中用ng-repeat列出它：

<div layout="column" id={{vm.folderId}}container flex layout-align="start center" class='container' dragula='"first-bag"'>
   <div id={{item.id}}child class="md-whiteframe-5dp capitalize itemsInList" layout="column"  ng-repeat="item in vm.workItems | filter:search">
      <div layout="column" flex >
         <div class="workItemName">{{vm.getWorkItemName(item.metadata)}}</div>
         <div class="workItemDescription">{{vm.getWorkItemDescription(item.metadata)}}</div>
      </div>
   </div>
</div>

因此，可以说我们列出了下一个列表：

item_1
item_2
item_3
item_4

而不是将另一个元素放入此容器ITEM_5。服务器删除后，服务器会给我新的列表：item_1-item_2-item_3-item_4-item_5，然后vm.workItems在这里更新：

if (data.ok) {
    if (data.content.items.length != vm.workItems.length) {
        vm.workItems = data.content.items; //from server
        SharedDataService.setLastUpdateTimeStamp(SharedDataService.getNewUpdateTimeStamp());
    }
}

在ng-repeat新鲜的物品之后，它也会在列表中查看放置的元素。所以最后我有：

item_1 //ng-repeated
item_2 //ng-repeated
item_3 //ng-repeated
item_4 //ng-repeated
item_5 //ng-repeated
item_5 //droped element

如何避免这种情况？有正常的解决方法吗？

更新。我删除了元素，当它被删除时，我向服务器发出请求以将新项目添加到列表中：

  $scope.$on('first-bag.drop', function (e, el, container) {
        var elementId = parseInt(el[0].id);
        var newContainerId = parseInt(container[0].id);
        var newPrevElementId;
        var newPrevElement = document.getElementById(el[0].id).previousElementSibling;

        if(newPrevElement) {
            newPrevElementId = parseInt(newPrevElement.getAttribute('id'));
        } else  if(!newPrevElement)  {
            newPrevElementId = newContainerId;
        }

        if(exContainerId != newContainerId) {
            WebSocketService.addItem(elementId, exContainerId,
}
}