Determine where this AngularJs Error $rootScope:infdig is coming from - angularjs

Question

Ok, I'm having a hard time trying to figure out what's causing this error. I think it may be due to a watch that I have in my routeOrderValidator directive but I can't see where I'm modifying the watch value. :(
Here is my Plunker and the error can be reproduced by entering a "3" into the Routing Order field for the John Smith reviewer.
Here is my directive code:
(function () {
'use strict';
angular
.module('app')
.directive('routeOrderValidator', routeOrderValidator);
routeOrderValidator.$inject = ['$filter'];
function routeOrderValidator($filter) {
var directive = {
require: 'ngModel',
link: link,
restrict: 'A'
};
return directive;
function link(scope, element, attrs, ngModel) {
scope.$watch(attrs.routeOrderValidator, function () {
ngModel.$validate();
}, true);
ngModel.$validators.routeOrder = function (modelValue, viewValue) {
return validate(scope, element, attrs, ngModel, modelValue, viewValue);
};
}
function validate(scope, element, attrs, ngModel, modelValue, viewValue) {
var isValid = true;
var reviewers = scope.$eval(attrs.routeOrderValidator);
if (!reviewers) {
return isValid;
}
var sorted = $filter('orderBy')(reviewers, 'route');
var i, len, count = 0;
for (i = 0, len = sorted.length; i < len; i++) {
if (sorted[i].office == 'Branch') {
count++;
}
}
for (i = 0, len = sorted.length; i < len; i++) {
if (count > 0) {
if (sorted[i].office == 'Branch') {
count--;
} else {
isValid = false;
break;
}
}
}
return isValid;
}
}
})();
Here is my controller code:
(function() {
'use strict';
angular
.module('app')
.controller('controller1', controller1);
controller1.$inject = ['$location'];
function controller1($location) {
var data = {
'title': 'More Snacks Please',
'description': 'Add beef jerky to the breakroom snacks.',
'reviewers': [{
'name': 'John Smith',
'office': 'Branch',
'route': '1'
}, {
'name': 'Amy Jones',
'office': 'Corporate',
'route': '2'
}, {
'name': 'Foo Bar',
'office': 'Corporate',
'route': '3'
}]
};
var vm = this;
vm.data = data;
}
})();
Here is my html:
<form name="form1">
<label>
Title:
<input type="text" name="title" ng-model="vm.data.title" />
</label>
<label>
Description:
<textarea type="text" name="description" ng-model="vm.data.description"></textarea>
</label>
<h3>Reviewers</h3>
<ul ng-repeat="reviewer in vm.data.reviewers">
<li>
<label>
Name:
<input type="text" name="name_{{$index}}" ng-model="reviewer.name" />
</label>
<label>
Office:
<select name="office_{{$index}}" ng-model="reviewer.office">
<option>Branch</option>
<option>Corporate</option>
</select>
</label>
<label>
Routing Order:
<input type="text"
name="route_{{$index}}"
ng-model="reviewer.route"
route-order-validator="vm.data.reviewers" />
</label>
<p ng-show="form1.route_{{$index}}.$error.routeOrder" class="error">Branch employees must be first in the routing order!</p>
</li>
</ul>
</form>

Answer 1

The issue that you have is that $validator will remove the incorrect object/attribute if it is invalid.
Example :
When Routing Order for John Smith is 3 then the route attribute will be removed as it is invalid.
This causing $watch to be triggered as the object is changed already and causing infinite loop.
One of the possible solution is to avoid ngModel.validate() until all other validation is completed (i.e validation of the individual routing order)
From :
scope.$watch(attrs.routeOrderValidator, function () {
ngModel.$validate();
}, true);
To:
scope.$watch(attrs.routeOrderValidator, function () {
if(ngModel.$valid )
{
ngModel.$validate();}
}, true);