How to initialize form field value?

Problem

Is there a way to initialize the following form fields so the Angular code doesn't display "NaN" when the form is loaded? Having the value start at zero would be nice.

<input type="text" id="field1" value="0"/>
<input type="text" id="field2" value="0"/>
<br />

Total {{field1*50--field2}}

http://plnkr.co/edit/Cn0tCJlclIMXivli1is0?p=preview

Problem courtesy of: 4thSpace

Solution

You can use the ng-init directive. Here's the stuff copied from your plunker that works with it. But you should use this with caution, here's an excerpt from the documentation:

The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.

<!DOCTYPE html>
<html ng-app>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    testing
    <input type="text" id="field1" ng-model="field1" ng-init="field1 = 0"/>
    <input type="text" id="field2" ng-model="field2" ng-init="field2 = 0"/>
    <br />

    Total {{field1*50--field2}}
    
  </body>

</html>

So really, you should do this:

angular.module('app', [])
  .controller('testCtrl', ['$scope',
    function($scope) {

      function init() {
        $scope.field1 = 0;
        $scope.field2 = 0;
      }
      init();
    }
  ]);
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body ng-app="app">
  <div ng-controller="testCtrl">
    testing
    <input type="text" id="field1" ng-model="field1" />
    <input type="text" id="field2" ng-model="field2" />
    <br />Total {{ field1 * 50 - -field2}}
  </div>
</body>

</html>

Solution courtesy of: Ben Black

Discussion

You just add a controller to your HTML and assign a ng-model to your <input> fields and intialize it with some values in the controller instead of using value in <input>.

That's enough to have a default value for the fields

Here is the working plunker of your code,

http://embed.plnkr.co/Ssk1bP6LWq9YgAIDYaEk/preview

Hope this helps!!!!

Discussion courtesy of: Alhuck A

This recipe can be found in it's original form on Stack Over Flow.