AngularJS - problems with ngRequired and conditional undefined

Question

I have always used ng-required with conditionals undefined like that:

<input type="text" name="var" id="var" ng-model="variable" ng-disabled="variable === undefined" ng-required="variable !== undefined">

I've never had any problems with this until now. I tried with different angularJS versions from version 1.4.9 to 1.6.2 and it happens to me the same, it enters a loop in browser because it changes the value of "variable" between the value that I have given it and undefined and it finishes failing the browser. I do not understand, I do not know why it fails now.

This is the error

Answer 1

Using the same scope variable to determine ng-required (which again targets itself) is not a good idea. So instead use different scope variable to conditionally mark input required or disabled like:

<input type="text" name="var" id="var" ng-model="variable" ng-disabled="otherVariable === undefined" ng-required="otherVariable !== undefined">

To clearly explain why your code causes indefinite digest loop takes some digging into angularjs framework code, which is waste of time