Angular 1.5 Base

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div id="body">
<script type='text/ng-template' id='template.html'>
    <form ng-submit="customInputCtrl.submit()"> 
    	<input type="number" ng-model="customInputCtrl.modelData" filter-input> 
        <button type="submit">Go</button>
    </form>
</script>
  <div ng-controller="Controller">
    
    <custom-input model-data="modelData"></custom-input>
    {{modelData}}
  </div>
</div>

JavaScript

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

appProva.controller('Controller', function($scope) {
 
 	$scope.modelData = '';

});

appProva.directive('customInput', function() {
    return {
        restrict: 'AE',
        replace: true,
        scope: {
        modelData: '='
        },
        bindToController: true,
        controllerAs: 'customInputCtrl',
        templateUrl: 'template.html',
        controller: function() {

            this.submit = function() {
                alert("submit!");
            }

        }
    }
})

appProva.directive('filterInput', function() {
    return {
        restrict: 'A',        
        scope: {},
        link: function(scope, elem, attr) {

			elem.bind('keypress', function(e) {
            	alert(e.code || e.which);
            })
            
            elem.on('keypress', function(e) {
            	alert(e.code || e.which);
            })

        }
    }
})

setTimeout(function() {
  angular.bootstrap(document.getElementById('body'), ['app']);
});