I need to add two numbers together and display the sum in a third input field:
HTML
<div ng-app="myApp">
<div ng-controller="MainCtrl as mainCtrl">
Main {{mainCtrl.foo}} <br/>
<input type="text" ng-model="mainCtrl.foo"/>
<input type="text" ng-model="mainCtrl.foo2"/>
<input type="text" ng-model="mainCtrl.foo3"/>
<br/>
</div>
</div>
JS
var myApp = angular.module('myApp', []);
var my = {};
my.MainCtrl = function() {
this.foo = '1';
this.foo2 = '2'
this.foo3 = this.calculateSum();
}
my.MainCtrl.prototype.calculateSum = function() {
return this.foo + this.foo2;
}
// registering all controllers
myApp.controller('MainCtrl', my.MainCtrl);
I am facing the issue that the third input field is only updated on initial load and does not change dynamically while I am typing values in the first two inputs.
Fiddle: http://jsfiddle.net/K64wb/