preventing maxLength on a input type number - angularjs

Question

I took me a while to figure this one out, but can someone post a cleaner method for limiting the number of digits in an input type='number'. One of the issues is that errors are thrown if $scope.variable = null....meaning nothing in the input field.
<input type="number" model='modalName' ng-change="monitorLength('modalName',16)">
JS:
$scope.monitorLength = function (model,maxLength) {
if ($scope[model] != null) { // prevent error on empty input field
var len = $scope[model].toString() ; // convert to a string
if (len.length > maxLength) { //evaluate string length
$scope[model] = parseInt(len.substring(0, maxLength));
// convert back to number or warning is thrown on input value not being a number
}
}
}
I then needed to expand up on this to account for number only, preventing any non-digit characters include '.' and ',' symbols:
var reg = new RegExp(/^\d+$/) ;
$scope.monitorLength = function (modal,maxLength) {
if ($scope[modal] != null) {
var len = $scope[modal].toString() ;
if (len.length > maxLength) {
$scope[modal] = parseInt(len.substring(0, maxLength));
} else if (!reg.test(len)) {
$scope[modal] = parseInt(len.substring(0, len.length-2));
}
}
}
Is there way to extract the ng-modal that was responsible for calling the ng-change? so the call would only have to be: ng-change="monitorLength(10)". And then in the function somehow dynamically retrieve the calling ng-modal?

Answer 1

<input type="number" max="99" onkeypress="if (this.value.length >= 2) return false;"/>
OR
<!--maxlength="10"-->
<input type="number" onKeyPress="if(this.value.length==10) return false;" />

Answer 2

this is a cleaner method for limiting the number, using ngMaxlength for that:
<input type="number" model='modalName' ng-maxlength="16">
You can find more attributes and info here

Answer 3

Is there way to extract the ng-modal that was responsible for calling the ng-change?
Yes. You can define a directive and require the ngModelController.
.directive('maxNum', function(){
return {
require: '^ngModel',
link: function($scope, elem, attrs){
// here you can add formatters/parsers to the ngModel
// to affect the change on the ngModel.$viewValue.
}
}
})
As #rolinger stated on the other answer, using the built in directives will not prevent the use from entering non-valid characters, they simply mark the model as being invalid.