title: Angular.js problems with small numbers and scientific notation in input fields
body: <p>I'm having troubles displaying and editing small numbers in an input field using Angular.js v1.3.14.</p>
  
  <p>I've attempted to use a directive to prevent the number from displaying in scientific notation. example: 0.00000005 instead of 5e-8.</p>
  
  <p>I get an error message from the directive because the datatype returned is a string and not a number.</p>
  
  <p>This is the error message I receive: <code>Error: [ngModel:numfmt] Expected '0.00000005' to be a number</code></p>
  
  <p>HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"&gt;&lt;/script&gt;
  &lt;div ng-app="myApp" ng-controller="myCtrl"&gt;
      &lt;input type="number" ng-model="myNum" /&gt;
      &lt;br/&gt;
      &lt;input decimal type="number" ng-model="myNum" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre class="lang-js prettyprint-override"><code>angular
      .module('myApp', [])
      .controller('myCtrl', function($scope) {
          $scope.myNum = 0.00000005;
      })
      .directive('decimal', function()
      {
          return {
              require: 'ngModel',
              link: function(scope, element, attrs, ngModelController) {
  
                  ngModelController.$formatters.push(function(data) 
                  {
                      var newData = data.toFixed != null ? data.toFixed(8) : data;
  
                      console.log('data', data, newData);
                      //convert data from model format to view format
                      return newData; //converted
                  });
  
              }
          };
      });
  </code></pre>
  
  <p>jsFiddle: <a href="http://jsfiddle.net/joelnet/u277z929" rel="nofollow">http://jsfiddle.net/joelnet/u277z929</a></p>
  
  <p>note: Ideally I would prefer to use type="number" and not type="text" for the input field.</p>
  
  <p>How can I force the input field to display ONLY decimal and not the scientific notation?</p>
  
  <p>EDIT: The reason I prefer to use type="number" is because (1) the field is a number type. (2) this brings up the number pad on mobile. (3) I can use the min, max fields. (4) The $scope.$watch only fires when the number is valid. (5) it's cleaner.</p>
  
  <p>EDIT2: It appears FireFox displays correctly (and doesn't need the directive example: <a href="http://jsfiddle.net/joelnet/u277z929/7" rel="nofollow">http://jsfiddle.net/joelnet/u277z929/7</a>), while Chrome and Internet Explorer display the number as scientific notation. Both of the input fields should display the number as decimal and never as scientific notation. </p>