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

Question

If I have an input text field whose value is exceeding the ng-maxlength upon form load (the input is still $pristine, not $dirty), the input field is misleadingly blank, while the ng-model still has data.

http://plnkr.co/edit/uUaC9tgHEozBkUReRXBk?p=preview

I want the input to present the same data as what the modal has, why is it showing me a blank?

Is this a bug? Or intended behavior?

Answer 1

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.

Answer 2

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