AngularJS input fails for big numbers in scientific notation

Question

I'm getting objects containing big numbers from a web service and show them in an <input type="number"> field. It works until angular begins to show the values in scientific notation. The value will be shown but when the user modifies the value it will be silently deleted from the scope.

Here is some example code

<div ng-app="testApp" ng-controller="testController">
    <input ng-model="value1" type="number" />{{ value1 }}
</div>

---

var app = angular.module("testApp", []);
app.controller('testController', function ($scope) {
  $scope.value = 1e+100;
});

http://jsfiddle.net/SJVH7/10/ (try to modify the first input box to 1e+101)

How should I handle such big numbers?

Answer 1

You will have to use a custom regex for this because the default regex matcher for the number input isn't detecting scientific notation. You can do this with the ng-pattern attribute.