title: Custom Validation Directive not working
body: <p>I have written a simple directive to validate numbers. However I never see the error messages if I enter characters in my input fields.</p>
  
  <p><a href="http://plnkr.co/edit/pbgVtMI3cT959edrysuA?p=preview" rel="nofollow">http://plnkr.co/edit/pbgVtMI3cT959edrysuA?p=preview</a></p>
  
  <p></p>
  
  <pre><code>&lt;html ng-app="MyCalc"&gt;
    &lt;head&gt;
       &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;     
       &lt;script src="app.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body ng-controller="MyController"&gt;
      &lt;h4&gt;My Simple Calculator&lt;/h4&gt;
      &lt;form name="calcform"&gt;
        &lt;span ng-show="calcform.item1.$error.numbersonly"&gt;item1 must be a number&lt;/span&gt;
        &lt;span ng-show="calcform.item2.$error.numbersonly"&gt;item2 must be a number&lt;/span&gt;
        &lt;input name="item1" type="number" ng-model="model.item1" numbersonly /&gt;            
        &lt;input name="item2" type="number" ng-model="model.item2" numbersonly /&gt;
        &lt;input ng-click="add()" type="button" value="+" ng-disabled="calcForm.$invalid"/&gt;
        &lt;input ng-click="subtract()" type="button" value="-" ng-disabled="calcForm.$invalid"/&gt;
        &lt;input ng-click="multiply()" type="button" value="*" ng-disabled="calcForm.$invalid"/&gt;
        &lt;input ng-click="divide()" type="button" value="/" ng-disabled="calcForm.$invalid"/&gt;            
        &lt;p&gt;&lt;font size="14"&gt;{{model.result}}&lt;/font&gt;&lt;/p&gt;
      &lt;/form&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  
  var app = angular.module('MyCalc', []);
  app.controller('MyController', function ($scope) {
      var mymodel = { item1: 0, item2: 0, result: 0 };
      $scope.model = mymodel;
      $scope.add = function () { mymodel.result = Number(mymodel.item1) + Number(mymodel.item2); };
      $scope.subtract = function () { mymodel.result = Number(mymodel.item1) - Number(mymodel.item2); };
      $scope.multiply = function () { mymodel.result = Number(mymodel.item1) * Number(mymodel.item2); };
      $scope.divide = function () { mymodel.result = Number(mymodel.item1) / Number(mymodel.item2); };
  });
  
  app.directive('numbersonly', function () {
      return {
          require: 'ngModel',
          link: function (scope, elem, attr, ctrl) {
              ctrl.$parsers.unshift(function (value) {
                  var isNan = isNaN(value);
                  ngModel.$setValidity('numbersonly', !isNan);
                  return (!isNan) ? value : undefined;
              });
  
              ctrl.$formatters.unshift(function (value) {
                  var isNan = isNaN(value);
                  ngModel.$setValidity('numbersonly', !isNan);
                  return value;
              });
      }
    };
  });
  </code></pre>