AngularJS - ngRepeat. Need to keep focus on the same element event after ng-repeat re rendering

Question

I have a list of three inputs, each of them can be deleted by the user by pressing a red cross placed at the left side of them. When the user delete one input, the next one is focused and the selected checkbox is deleted. Until there so far so good. After deleting the element the ng-repeat loop iterates over the updated model and I lose the element focus. Is there any way to prevent this?

Thanks so much,

Guillermo

PD: Including the directive code just in case.

directive('checkEmptyInput', function ($timeout,$q) {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function (scope, element, attrs, ngModel) {
            if(!ngModel) return; //do nothing if no ng-model

            var idx = scope.$index,
                array = [],
                fieldIsValid = false;



            element.on('keyup', function () {


                switch (attrs.checkEmptyInput) {
                    case "method":
                        array = scope.album.tracks;

                        fieldIsValid = scope.ngAlbumForm.track.$valid;
                    break;
                }

                if(array[idx].name && array[idx].name != "" && fieldIsValid) {
                    array[idx].active = true;
                } else {
                    array[idx].active = false;


                    if(scope.elementHasId(array[idx])){
                        scope.deleteKeyFromCombinationsCodes(array[idx].id);
                    }
                };

                if (array[idx].name == "") {

                    //Previous to delete focus the next element
                    $timeout(function () {
                        var nextElem = element.parent().next().find('input')[0];

                        if(nextElem !== undefined) {

                            if(!scope.$last) {

                                //Delete the element
                                console.log("Deleting from inside the directive...");
                                nextElem.focus();                                   
                                scope.$emit("deleteArrayElement", [idx]);

                            }

                        }

                    });

                }

            });

        }
    }
})

HTML:

                    <div ng-repeat="track in album.tracks">
                        <input check-empty-input="track" type="text" ng-change="addInputText($index,$last,track.name,album.tracks;" ng-minlength="3" class="album_tracks" ng-model="track.name" ng-unique="track"/><button type="button"/>
                        <i class="remove-icon"></i>
                        </button>
                    </div>

Plunker: http://plnkr.co/edit/BRN9csBcxHp5QU96NKq9?p=info

Answer 1

Ah, I see with the plunk. ng-repeat re-uses elements and you pick the index during initial linking. If you set idx inside your keyup handler it works. (PLNKR)

element.on('keyup', function () {
    idx = scope.$index;