title: Angular: how to fire ngChange when input type="number" but not entered a number
body: <p>I'm building an angular directive, where I have two number inputs and both together represent an age range.</p>
  
  <p>What I want to achieve is being able to use this directive the following way:</p>
  
  <pre><code>&lt;input-age-range
      name="ageRange"
      ng-model="filterUpdateVM.ageRange"&gt;
  &lt;/input-age-range&gt;
  &lt;span ng-if="myCtrlVM.form.ageRange.$error.ageRange"&gt;
      Please, enter a valid age range.
  &lt;/span&gt;
  </code></pre>
  
  <p>and be able to show a custom error when the entered age range is not correct.</p>
  
  <p>My directive html template looks this way:</p>
  
  <pre><code>&lt;div class="col-md-3"&gt;
      &lt;input type="number"
             class="form-control"
             placeholder="Minimum age"
             name="ageMin"
             min="18"
             max="80"
             ng-change="checkAndValidateAgeRange()"
             ng-model="ageRange.ageMin"
             ng-model-options="{allowInvalid: true}"&gt;
  &lt;/div&gt;
  &lt;div class="col-md-3"&gt;
      &lt;input type="number"
             class="form-control"
             placeholder="Maximum age"
             name="ageMax"
             min="18"
             max="80"
             ng-change="checkAndValidateAgeRange()"
             ng-model="ageRange.ageMax"
             ng-model-options="{allowInvalid: true}"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Every time the user types anything in an input, I wish to check the if the entered range is correct:</p>
  
  <ul>
  <li>Both ages should be numbers</li>
  <li>Both ages should be between 18 and 80</li>
  <li>ageMin &lt;= ageMax</li>
  </ul>
  
  <p>So far <code>ng-model-options="{allowInvalid: true}"</code> will let the ngChange function inside my directive to be triggered in case any of the ages entered is not between the desired age range (18-80) - this way I can do some checking and set an input error if there's any and show it.</p>
  
  <p>My problem here is that if the age entered at first is not a number, ngChange is not called: it won't be able to do the error checking so there won't be any errors to be shown. How can I have my ngChange function called in this case, without changing my input <code>type="number"</code>? </p>
  
  <p><strong>EDIT: Jsfiddle added:</strong> <a href="http://jsfiddle.net/afkf96qh/" rel="nofollow noreferrer">http://jsfiddle.net/afkf96qh/</a></p>