Why is ng-maxlength not re-evaluated? - angularjs

Question

I have a form, that has one input field and three check boxes. Depending on which check box is selected the max length on the field needs to change. I have a input field defined like this
<input placeholder="ID" type="text" id="form_ID" name="searchId" autofocus
data-ng-model="vm.searchCriteria.searchId" data-ng-required="vm.isSearchIdRequired"
data-ng-minlength="1" data-ng-maxlength="{{searchIdMaxLength}}"
data-ng-class="{'input-error': vm.isSearchIdValid}">
and one of the checkboxes
<input type="checkbox" id="checkbox1" class="hidden-field"
data-ng-model="vm.searchCriteria.searchIdInSrId" data-ng-checked="vm.searchCriteria.searchIdInSrId"
data-ng-change="processSearchIdOptionsChange()">
So everytime user changes which checkbox is/are selected processSearchIdOptionsChange gets called, and searchIdMaxLength changes it's value. This is all working fine and I can see the value being changed on the $scope. But, my initial max length is still being applied. Following error pops up after initial max number of chars is reached. Why?
<span class="error" data-ng-show="(searchForm.$dirty && searchForm.searchId.$error.maxlength)">Too long!</span>

Answer 1

This is the intended behaviour of ng-maxlength. Verified from source : https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js?source=c#L523
The value is parsed only once and cached :
var maxlength = int(attr.ngMaxlength);
If you want to observe the change you need to create your own directive which uses something like
scope.$watch(attr.namespaceMaxLength,function(){
// clear old validator. Add new one.
})

Answer 2

After a lot of trial and error here is the directive that does what I need. Please if you have any suggestions or improvements share them, I have only 7 days of angular under my belt, and javascript is something that i have a cursory knowledge of.
(function () {
'use strict';
angular.module('commonModule')
.directive('srMaxlength', ['$window', srMaxlength]);
function srMaxlength($window) {
// Usage:
// use if you need to switch max length validation dynamically based on
// Creates:
// removes old validator for max length and creates new one
var directive = {
require: 'ngModel',
link: link,
restrict: 'A'
};
return directive;
function link(scope, element, attrs, ctrl) {
attrs.$observe("srMaxlength", function (newval) {
var maxlength = parseInt(newval, 10);
var name = "srMaxLengthValidator";
for (var i = ctrl.$parsers.length - 1; i >= 0; i--) {
if (ctrl.$parsers[i].name !== undefined && ctrl.$parsers[i].name == name) {
ctrl.$parsers.splice(i, 1);
}
}
for (var j = ctrl.$formatters.length - 1; j >= 0; j--) {
if (ctrl.$formatters[j].name !== undefined && ctrl.$formatters[j].name == name) {
ctrl.$formatters.splice(j, 1);
}
}
ctrl.$parsers.push(maxLengthValidator);
ctrl.$formatters.push(maxLengthValidator);
//name the function so we can find it always by the name
maxLengthValidator.name = name;
function maxLengthValidator(value) {
if (!ctrl.$isEmpty(value) && value.length > maxlength) {
ctrl.$setValidity('maxlength', false);
return undefined;
} else {
ctrl.$setValidity('maxlength', true);
return value;
}
}
});
}
}
})();