Add Values in Angularjs

Question

I’m 5 inputs where I enter some values, but when I try to sum the total result is not displayed in the last input. HTML:

 <label class="item item-input">
    <span class="cinza input-label">Valor 1</span>
    <input type="number" ng-model="var1"> </input></label>
    <label class="item item-input">
    <span class="cinza input-label">Valor 2</span>
    <input type="number" ng-model="var2"> </input></label>
    <label class="item item-input">
    <span class="cinza input-label">Valor 3</span>
    <input type="number" ng-model="var3"> </input></label>
    <label class="item item-input">
    <span class="cinza input-label">Valor 4</span>
    <input type="number" ng-model="var4"> </input></label>
    <label class="item item-input">
    <span class="cinza input-label">Valor 5</span>
    <input type="number" ng-model="var5"> </input></label>
    <div ng-controller="Total">
    <label class="item item-input">
    <span class="cinza input-label">Total</span>
    <input type="number" ng-model="total"> </input></label></input> 
</div>

Controller:

.controller('Total', function ($state, $scope) {

$scope.var1 = 0;
$scope.var2 = 0;
$scope.var3 = 0;
$scope.var4 = 0;
$scope.var5 = 0;

var total = $scope.var1 + $scope.var2 + $scope.var3 + $scope.var4 + $scope.var5;

$scope.total = total;

})

How do I display total value in an input?

Answer 1

The statement of the other answer is true and works, but as an alternative, if you want to put the value in the total property, a self-executable function can be used, such as:

$scope.total = (function(){
   $scope.var1 + $scope.var2 + $scope.var3 + $scope.var4 + $scope.var5;
})();

Answer 2

It is not working because you do not call any action (function) that does the sum.

Try the following:

At its last input put a ng-Blur or ng-click

<input type="number" ng-click="somarValores()" ng-blur="somarValores()" ng-model="var5"> </input></label>

And in your Controller:

$scope.somarValores = function(){
    $scope.total = $scope.var1 + $scope.var2 + $scope.var3 + $scope.var4 + $scope.var5;
}

Working example: http://codepen.io/anon/pen/KdJmwq

OBS: An excerpt of your html can present problems too, I don’t know how the whole structure is but I noticed that you call the Controller only at the end of html. Thus all variables declared in Controller are only "seen" at the end.

Answer 3

If anyone’s still in doubt, it’s settled: http://codepen.io/anon/pen/JYxJEG.