Question

I have simple model and jquery effects attached on elements rendered inside ng-repeat. Does someone know why model is not updated immediately after end of destroyElement() function?

JSFiddle: http://jsfiddle.net/nEzpS/33/

HTML:
<div ng-controller="TestController">
    <ul>
        <li ng-repeat="field in Fields" ng-animate-repeat-slide="500">
            <span>{{field.name}}</span> <button ng-click="RemoveItem(field)"> Remove</button>
        </li>    
    </ul>    

    <br />

    <code style="color: green;">
        Fields.length: {{Fields.length}}
    </code>

    <code>
        {{Fields}}
    </code>

    <br />
</div>

JS:
var myApp = angular.module('myApp', []);

function TestController($scope) {
    $scope.Fields = [{name: 'One'}, {name: 'Two'}, {name: 'Three'}, {name: 'Four'}, {name: 'Five'}];

    $scope.RemoveItem = function (item) {
            var index = $scope.Fields.indexOf(item);

        this.destroyElement(function () {
            $scope.Fields.splice(index, 1);
        });
    }
}

myApp.directive('ngAnimateRepeatSlide', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                var duration = parseInt(attrs['ngAnimateRepeatSlide']);
                duration = !isNaN(duration) ? duration : 500;
                jQuery(element).css('display', 'none').slideDown(duration);

                scope.destroyElement = function (onCompleteFn) {

                    jQuery(element).animate({ opacity: 0 }, 200);
                    jQuery(element).slideUp(duration,
                        function () {
                            onCompleteFn.call();
                        }
                    );
                }
            }
        };
});

Answer 1

It’s not running directly in the event scope anymore where it would have been automatically watched (as you have the animation that does the callback).

In this case, you’ll need to call $scope.$apply()

$scope.RemoveItem = function (item) {
    var index = $scope.Fields.indexOf(item);

this.destroyElement(function () {            
        $scope.Fields.splice(index, 1);
        $scope.$apply();
});
}

You can see the difference if you remove the slideUp and just directly execute onCompleteFn.call() after the animate function call.