JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.angularjs.org/1.2.1/angular.min.js"></script>
<div ng-controller="MyCtrl as ctrl">
  <form name="myForm">
    <input type="text" ng-model="ctrl.code" required numeric-only />

    <span ng-show="myForm.$invalid">Form is invalid!</span>
  </form>
</div>

JavaScript

(function(angular) {
  "use strict";

  angular
    .module('app', [])
    .controller('MyCtrl', [myCtrl])
    .directive('numericOnly', [numericDirective]);

  function numericDirective() {
    return {
      require: 'ngModel',
      link: function(scope, elem, attr, ctrl) {
        var numericRegexp = /^\d+$/;

        var validator = function(viewValue) {
          var isValid = numericRegexp.test(viewValue) && (viewValue % 2) === 0 && (viewValue % 7) === 0;

          ctrl.$setValidity('numericOnly', isValid);

          // we should always return value and don't return undefined
          // otherwise we won't set invalid value as default ( e.g. = 'q1' )
          return viewValue;
        };

        ctrl.$parsers.push(validator);
        ctrl.$formatters.push(validator);
      }
    }
  }

  function myCtrl() {
    this.code = 'q1';
  }
})(angular);