Removing an ngRepeat element from the $ rootScope array does not immediately remove the element from html

Question

Trying to remove li from ul using angular by successfully deleting an element from the array, but angularJS does not remove li until it hangs over / some action is performed on that particular one. Code follows:

app.js

myApp.run(function($rootScope, appAPIservice){ 
  appAPIservice.getInterests().success(function (response) {
    $rootScope.interests = [];
    if (response.data) {
      var interests = response.data;
      for (var i = 0; i < interests.length; i++) {
        $rootScope.interests.push(interests[i]));
      }
    }
  });
});

index.html

<ul ng-controller="interestsController">   
  <li ng-repeat="interest in interests">
    <a href="#{{interest.link}}">{{interest.parentName}} / {{interest.childName}}</a>
    <button ng-click="deleteInterest($index)"></button>
  </li>
</ul>

controllers.js : deleteInterest is specified here

myApp.controller('interestsController', function($scope) {
  $scope.deleteInterest = function(arrayIndex) {
          $scope.interests.splice(arrayIndex, 1);
      });
  }
});

This leads to the following output when loading the page:

<ul class="ng-scope" ng-controller="interestsController">   
  <li class="ng-scope" ng-repeat="interest in interests">
    <a href="#/other-link class="ng-binding">Other Parent/Other Child</a>
    <button ng-click="deleteInterest($index)"><i class="icon-close"></i></button>
  </li>
</ul>

The problem occurs when you click deleteInterest (). The following classes are added to the list item class: ng-animate, ng-leave, ng-leave-active. Unfortunately, the list item remains in the list until the item is visible above . At this point, the list item is successfully removed from the DOM.

<li class="ng-scope ng-animate ng-leave ng-leave-active" ng-repeat="interest in interests">
  <a href="#/some-link" class="ng-binding">Some Parent / Some Child </a>
  <button ng-click="deleteInterest($index)"><i class="icon-close"></i></button>
</li>

Controller.deleteInterest's $scope.interests.splice(arrayIndex, 1);

$scope.$apply(function(){ 
  $scope.interests.splice(arrayIndex, 1);
}); 

, , $scope. $digest .

angularJS ng-leave?

Answer 1

. $scope.$apply

$timeout(function(){ 
  $scope.interests.splice(arrayIndex, 1);
});

$timeout , , , .

, CSS li angular ?

.ng-leave { display:none; }

Answer 2

ng-repeat. 0 :

$timeout(function(){ 
  do_some_action
}, 2000);

evalAsync :

$scope.$evalAsync(function () {
   do_some_action
});

Another workaround is to simply ignore the old elements:

var elems = angular.element(document.getElementsByClassName('repeated_items'));
_.each(elems, function (itm) {
   if (itm.$$hashKey) return true;
   do_some_action
});