title: How can I make a custom digit/time input for AngularJS?
body: <p>I want to make an input box that prevents the user from entering bad data and formats the user's input on blur.</p>
  
  <p>I want to use a custom directive because the input type=number has some features that I do not want.</p>
  
  <pre><code>&lt;input type="text" ng-model="time" /&gt;
  </code></pre>
  
  <p>When the user types in a bad entry, I want to prevent them from seeing that and going into the model. e.g 1a the 'a' will not be shown.
  If they type 99:c they will not see the 'c'
  or 55:10: they will not see the second ':'</p>
  
  <p>I want these to be valid entries:</p>
  
  <p>x number of hours : y number of minutes</p>
  
  <p>e.g.</p>
  
  <ul>
  <li>99:32 - 99 hours and 32 minutes</li>
  <li>9 - 9 hours</li>
  <li>0:02 - 2 minutes</li>
  </ul>
  
  <p>Here is what I have so far:
  <a href="https://plnkr.co/edit/Nkjr5ahjBj4OQ3q2fMhL?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/Nkjr5ahjBj4OQ3q2fMhL?p=preview</a></p>