angularjs, ng-model and maxlength: String was not truncated

Question

If I have this html:

    <input type="text" ng-model="person.name" maxlength="10" />

And this js (angularjs)

   $scope.person = {
       name: "Larger than 10"
   };

What I get, "rendered", is this:

But I was expecting that maxlength would truncate the string, as it does when you are typing from scratch (when the input field starts in blank). Check this gif animation:

Question: Is there an easy workaround to get what I was expecting?

The problem is that I can't get the model value if it is not a valid length, ie: Send later $scope.person.name through an ajax request

Note: ng-maxlength behaves the same

Answer 1

You can create yours own directive

app.directive("limitTo", [function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);
            angular.element(elem).on("keypress", function(e) {
                if (this.value.length == limit) e.preventDefault();
            });
        }
    }
}]);

<input limit-to="4" class="" ng-model="person.name" placeholder="">