AngularJS jQuery combination - model in scope not updated

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();
                        }
                    );
                }
            }
        };
});