title: Reset a HTML5 "number" field containing text using AngularJS in Google Chrome
body: <h1>Use Case</h1>
  
  <p>I have a number field that specifically says "<em>Enter a number</em>". The end user will invariably enter a string. When the user clicks the "Reset" button using Google Chrome, the number fields containing text will not reset.</p>
  
  <p>The requirements are:</p>
  
  <ul>
  <li>Users cannot be upgraded to follow instructions. <strong>:D</strong></li>
  <li>Clicking the reset button should default the number back to <em>undefined</em>.</li>
  <li>Ideally, we'd like to keep the <code>type="number"</code> attribute as it allows for the keypad to popup on mobile devices.</li>
  </ul>
  
  <h2>Code</h2>
  
  <p>A <a href="http://jsfiddle.net/TQ59f/1/" rel="nofollow"><strong>jsFiddle</strong></a> demo is available.</p>
  
  <h3>Angular Template</h3>
  
  <pre><code>&lt;div ng-app="app" ng-controller="ctrl"&gt;
      &lt;p&gt;
          Enter a string into the "number" field. Clicking any of the buttons
          will not clear the field.
      &lt;/p&gt;
      &lt;p&gt;
          Enter a number into the "number" field. Clicking any of the buttons
          will clear the field.
      &lt;/p&gt;
      &lt;input type="number" ng-model="someValue" placeholder="Enter a number"/&gt;
      &lt;button type="button" ng-click="set('hello, world!')"&gt;Set to Hello, World!&lt;/button&gt;
      &lt;button type="button" ng-click="set(undefined)"&gt;Set to undefined&lt;/button&gt;
      &lt;button type="button" ng-click="set('')"&gt;Set to empty string&lt;/button&gt;
      &lt;button type="button" ng-click="set(0)"&gt;Set to zero&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>Angular Application &amp; Controller</h3>
  
  <pre><code>angular.module('app', [])
  .controller('ctrl', function($scope) {
      $scope.someValue = undefined;
      $scope.set = function(val) {
          $scope.someValue = val;
      };
  });
  </code></pre>
  
  <h2>Question</h2>
  
  <ul>
  <li>How do you reset a number field to undefined (or blank) containing an invalid value within Angular?</li>
  </ul>