title: Restrict input type number
body: <p>I'm having trouble to restrict an input type number to positive number only. As stated in that post : <a href="https://stackoverflow.com/questions/8808590/html5-number-input-type-that-takes-only-integers">HTML5: number input type that takes only integers?</a> I am <strong>not</strong> looking for the step="1" answer since it allows the user to type {e.,} as well.</p>
  
  <p>I am using a directive I found on a related post (<a href="https://stackoverflow.com/questions/14615236/how-do-i-restrict-an-input-to-only-accept-numbers">How do I restrict an input to only accept numbers?</a>) to which I just added a few console log and a toString() : </p>
  
  <p>It's working fine when the input type is a text, however it's never called when the input type is number and I type either 'e' ',' or '.'.</p>
  
  <p>Any idea on what I am missing here ? I want to use the input type=number to enable the arrow to select a value using angular material.</p>
  
  <pre class="lang-js prettyprint-override"><code>function restrictInput($mdDialog) {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attr, ctrl) {
        function inputValue(value) {
          console.log("hello ! :", value)
          var val = value.toString();
          console.log("goodbye ! : ", val)
          if (val) {
            var digits = val.replace(/[^0-9]/g, '');
            console.log("digits :", digits)
            console.log("val : ", val)
            if (digits !== val) {
              ctrl.$setViewValue(digits);
              ctrl.$render();
            }
            return parseInt(digits, 10);
          }
          return undefined;
        }
        ctrl.$parsers.push(inputValue);
      }
    };
  }
  </code></pre>
  
  
  
  <p>Html is something like this : </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;md-input-container flex class="md-input-has-placeholder"&gt;
    &lt;label&gt;Années d'expérience stage inclus&lt;/label&gt;
      &lt;input
        type="number"
        required
        step="1"
        restrict-input
        min="0"
        name="Expérience stage"
        ng-model="model"&gt;
      &lt;div ng-messages="form['Expérience stage'].$error" md-auto-hide="false"&gt;
        &lt;div ng-message="required"&gt;Requis&lt;/div&gt;
      &lt;/div&gt;
  &lt;/md-input-container&gt;
  </code></pre>
  
  
  
  <p><strong>EDIT</strong></p>
  
  <p>Using getter setter (ng-model-options="{ getterSetter: true }") worked out perfectly here.</p>