Why is it necessary to create a function in angularjs to return sum of added numbers?

Question

I have been using angularjs in applications for a while, but suddenly i am all lost with this simple illusive nature of angular.

This is my code :

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

First Number: <input type="number" ng-model="firstNumber"><br>
Last Number: <input type="number" ng-model="secondNumber"><br>
<br>
Sum: {{result()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstNumber = 0 ;
    $scope.secondNumber = 0;
    $scope.result = function() {
        return $scope.firstNumber + $scope.secondNumber;
    };
});
</script>

</body>
</html>

Above code is working fine, but the thing i am not getting is, the call to the {{result()}} updates the result in view. That means, the function is triggered each time the values are changed. But with my understanding i wanted following code to work properly but it doesn't.

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstNumber = 0 ;
        $scope.secondNumber = 0;
        $scope.result = $scope.firstNumber + $scope.secondNumber;

    });
    </script>

and in view :

Sum : {{result}}

The result shows only the initial result i.e 0 but doesn't show the sum after the input numbers are changed.

Since the result is in scope context and its value should change in each user input change, why does the sum value not being reflected on view.

Please help!

score 3 · Accepted Answer · answered Jan 13 '18 at 12:58

The result in display will change as and when its model is updated in a function that gets continuous updates. Since all the JavaScript statements are executed only once as part of initialization of the controller, the result is evaluated first time and so is the view. But as you change the values, Angular does its job of updating the model for firstNumber and secondNumber with values from input fields and that's it because we didn't tell it to do anything upon change of the value and just like any other programming language feature, neither JavaScript nor Angular will re-compile all JavaScript statements of its controller because it's part of the definition of the controller.

Next question must be then what happens when we write {{ firstNumber + secondNumber }}, is Angular keeps on evaluating the value for these models and their corresponding view (not the JavaScript statement that is written in controller definition that adds these numbers).

Great explanation, i am pretty much clear about the concept, i.e there is not any updating mechanism on doing {{result}} or the code on the controller $scope.result = $scope.firstNumber + $scope.secondNumber; is not updated, so the value result is not updated. Calling {{result()}} tells angular to call the function which then calculates the sum of updated inputs which are each updated by using ng-model and hence result is updated. Please correct me if i am still wrong. Anyways, great explanation, Great thanks, kudos. — Prabin Upreti, Jan 14 '18 at 15:40
@PrabinUpreti yep. I am glad I could help. Try practicing with examples in other answers here to know little tricks we can use to build functionalities. — Akshay Raut, Jan 14 '18 at 16:02

NTP · Answer 2 · 2018-01-13T12:55:42.827

It is because your result has a different data model, also you don't have to use a function. You can use the following to display sum

First Number: <input type="number" ng-model="firstNumber"><br>
Last Number: <input type="number" ng-model="secondNumber"><br>
<br>
Sum: {{firstNumber + secondNumber}}

also {{result()}} will be triggered everytime when there is a change in data model, you may want to use $scope.$watch or ng-change to only calculate sum when there is a change in firstNumber or secondNumber.

score 0 · Answer 3 · answered Jan 13 '18 at 13:32

each function in angularjs controller be fired only one time .

first trick is using watch in function

 $scope.result=function(){   
      return $scope.firstNumber + $scope.secondNumber;
   $scope.$watchGroup(['firstNumber ', 'secondNumber'], 
    function(newValues, oldValues, scope) {
    return newValues[0]+newValues[1]
    });
}

and second trick is using ng-change for execute for every change

First Number: <input type="number" ng-change="result()" ng-model="firstNumber"><br>
Last Number: <input type="number" ng-change="result()" ng-model="secondNumber"><br>

in controller :

  $scope.result = function() {
        return $scope.firstNumber + $scope.secondNumber;
    };

Why is it necessary to create a function in angularjs to return sum of added numbers?

3 Answers3