why does angularjs blank out the input field when ng-maxlength is exceeded on initialization?

This is because after exceeding the ng-maxlength criteria, angular js treats the input as undefined. You can use html maxlength attribute with the ng-maxlength. Html maxlength will restrict the input value to that limit only and ng-model will store the input value for the limited length only. And you can use ng-maxlength for showing error upon exceeding the limit.

adding ng-model-options="{ allowInvalid: true }" to the html element fixed this for me.