AngularJS: directive in loop not called when removing elements, trigger it manually? - angularjs

Question

I have a couple of input fields in a ng-repeat block, and the user can add and remove fields with a button. A directive is used to mark invalid fields on blur.
My problem is this:
When I add new fields to the model in the controller, everything works fine. The view is updated, and the directive is called again to handle errors on the input fields.
But when I remove Fields from the model, the view is updated but the directive does not run. When the ng-repeat is rendered, a function is bound to the blur event of the fields. (inputNgEl.bind). When the user removes fields from the list, say, the 2nd field of 4, the rest of the fields get new names, so the function has to be bound again. Thats why I need the directive to run again after a person has been removed.
My demo code: http://plnkr.co/edit/EBggptFsMFld2fMfzS83?p=preview
You can see in the console how the directive is called when you add new fields, but not when you remove them.
What I would need is a way to trigger the directive manually in the removePersonFields function of the controller, or another, more elegant solution. Is this possible?
Here is the HTML:
<form novalidate name="form">
<div ng-repeat="person in persons" >
<div class="form-group" show-errors errorfieldindex="{{$index}}">
<label class="control-label">Name ({{'name_'+$index}})</label>
<input ng-model="person.name" name="name_{{$index}}" required class="form-control">
<span ng-if="form['name_'+$index].$error.required" class="help-block">Name invalid.</span>
</div>
<div class="form-group" show-errors errorfieldindex="{{$index}}">
<label class="control-label">Mail ({{'email_'+$index}})</label>
<input type="email" ng-model="person.email" name="email_{{$index}}" required class="form-control">
<span ng-if="form['email_'+$index].$error.required" class="help-block">Email required.</span>
<span ng-if="form['email_'+$index].$error.email" class="help-block">EMail invalid.</span>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default" ng-click="removePersonFields($index)" ng-show="persons.length > 1">remove</button>
<button type="button" class="btn btn-default" ng-click="addPersonFields()">add</button>
</div>
</div>
</form>
The corresponding controller:
app.controller('MainCtrl', function($scope) {
$scope.init = function() {
$scope.persons = [{name: 'User One', email: 'aaa.bbb#ccc.org'},
{name: 'User Two', email: 'ddd.eee#fff.org'}];
}
$scope.addPersonFields = function() {
console.log("add person row");
$scope.persons.push( {name: '', email: ''});
}
$scope.removePersonFields = function(index) {
console.log("remove person row");
$scope.persons.splice(index,1);
// the view is updated after the splice, but the directive does not run.
}
$scope.init();
});
Every input field has a name with the current index of the loop. I use this name in the directive 'show-errors' to assign and remove a css-class when the field looses focus. The class is only there to hide the error messages until the user leaves the input field.
The directive 'showErrors':
app.directive('showErrors', function() {
return {
restrict: 'A',
require: '^form',
scope: {
errorfieldindex : '#'
},
link: function (scope, el, attrs, formCtrl) {
console.log("showErrors - link!");
// find the text box element, which has the 'name' attribute
var inputEl = el[0].querySelector("[name]");
// convert the native text box element to an angular element
var inputNgEl = angular.element(inputEl);
// get the name on the text box so we know the property to check
// on the form controller
var inputName = inputNgEl.attr('name');
if(typeof inputName != 'undefined') {
console.log("inputName: " + inputName);
var errorFieldIndex = scope.errorfieldindex;
if(typeof errorFieldIndex != 'undefined') {
console.log("errorFieldIndex: " + errorFieldIndex);
if(inputName.indexOf("{{$index}}") > 0) {
console.log("replace {{$index}} with " + errorFieldIndex);
inputName = inputName.replace("{{$index}}", errorFieldIndex);
}
}
// only apply the has-error class after the user leaves the text box
inputNgEl.bind('blur', function() {
console.log("bind Blur-event on element: " + inputName);
el.toggleClass('has-error', formCtrl[inputName].$invalid);
});
}
}
}
});