JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.angularjs.org/1.5.5/angular.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.$pending">Validating in process...</span>
    <span ng-show="myForm.$invalid">Form is invalid!</span>
  </form>
</div>

JavaScript

(function(angular) {
  "use strict";

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

  function numericDirective($q, $timeout) {
    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;

          return $q(function(resolve, reject) {
            return $timeout(function() {
              return isValid ? resolve('Valid') : reject('Invalid')
            }, 1500);
          });
        };

        ctrl.$asyncValidators.numericOnly = function(modelValue, viewValue) {
          return validator(viewValue);
        };
      }
    }
  }

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