title: angular validate input type="number"
body: <p>I have markup like this:</p>
  
  <pre><code>&lt;form name="myForm" ng-controller="myCtrl" novalidate&gt;
      &lt;input ng-model="theValue" type="range" min="0" max="100" required&gt;
      &lt;input ng-model="theValue" type="number" required&gt;&lt;/input&gt;
      &lt;span ng-show="theValue.$error.number"&gt;Hey! No letters, buddy!&lt;/span&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And I want the span to show when the user accidentally types a letter in the second input. Simple, right? As an (probably) related problem, the value in the second input disappears when the user moves the first slider input. Why? This doesn't happen if I remove <code>type-number</code> from the markup.</p>
  
  <p>To be clear: I want the user to see the tooltip error immediately when it's typed, without any "submit" action. (I'd prefer not to have to use the <code>form</code> element at all in fact, but all the related demos seem to require it.)</p>
  
  <p><a href="http://jsfiddle.net/7FfWT/">http://jsfiddle.net/7FfWT/</a></p>
  
  <p>Any workaround is most welcome. Please post a working fiddle if possible.</p>