[Angular Directive] Limit Text filed input length using Angular Directive.

<!DOCTYPE html>
<html ng-app='myApp'>

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
  <script src="script.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  </head>

  <body ng-controller='Ctrl'>
    <div class="row">
      <div class="col-md-6">
       Amount:  <input type="text" ng-model="amount" limit="10" only-digits amount-limit />
      </div>
    </div>
  </body>

</html>

// Code goes here

var myApp = angular.module('myApp', []);

myApp.controller('Ctrl', function($scope) {
  // alert();
});

myApp.directive('onlyDigits', function() {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function(scope, element, attrs, ctrl) {
      ctrl.$parsers.push(function(input) {
				if(input === undefined) {
					return '';
				}

				var output = input.replace(/[^0-9]/g, '');
				if(output !== input) {
					ctrl.$setViewValue(output);
					ctrl.$render();
				}

				return output;
			});
    }
  }
});


myApp.directive('amountLimit', function() {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function(scope, element, attrs, ctrl)
    {
      var limit = parseInt(attrs.limit);
      element.bind('keypress', function(event) {
        if(element[0].value.length >= limit) {
          event.preventDefault();
        }
      });
    }
  }
});

/* Styles go here */