If we call angular function from html page then how it will works?

Question

In the below code, $scope.contactList contains a list of contacts with an isActive flag for each contact.

If we invoke $scope.getInactiveCount from the controller then it will give a count of inactive contacts.

What if we invoke that function from HTML? Will it execute once when DOM loads or execute every time?

Whenever a new contact is added into the list how will the $scope.getInactiveCount function trigger?

I want to know the flow of angular functions when they are called from HTML pages.

app.js

angular.module('demo',[]).controller('demoController',function($scope){

    $scope.contactList=[{firstName:'John',lastName:'Moody',isActive:'Y'},
                       {firstName:'Chris',lastName:'George',isActive:'Y'},
                       {firstName:'Anabella',lastName:'Maze',isActive:'N'},
                       {firstName:'Joseph',lastName:'Butler',isActive:'Y'},
                       {firstName:'Roni',lastName:'Ray',isActive:'N'},
                       {firstName:'Tim',lastName:'Cook',isActive:'Y'},
                       {firstName:'Angel',lastName:'Christina',isActive:'N'}];

    $scope.getInactiveCount=function(){
        var count=0;
        $scope.contactList.forEach(function(d){
            if(d.isActive=='N')
                count++;
        })
        return count;
    };

    $scope.addContact=function(firstName,lastName){
        var contact={firstName:firstName,lastName:lastName,isActive:'N'};
        $scope.contactList.push(contact);
    }
});

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Calling Angular function from HTML</title>
        <script src="angular.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body>
        <div data-ng-app='demo'>
            <div data-ng-controller='demoController'>
                Inactive contacts count: {{getInactiveCount()}}
                <br/>
                <div>
                    <input type=text ng-model="firstname">
                    <input type=text ng-model="lastname">
                    <br>
                    <input type='button' value='Add contact' ng-click='addContact(firstname,lastname)' >
                </div>
            </div>
        </div>
    </body>
</html>

Avoid putting functions in interpolation `{{ }}` bindings as the function will called every digest cycle. — georgeawg, Jul 13 '17 at 11:53
And sometimes multiple times per digest cycle until the result stabliizes. See [AngularJS Developer Guide - Conceptual Overview (Data Binding)](https://docs.angularjs.org/guide/concepts#a-first-example-data-binding) — georgeawg, Jul 13 '17 at 12:02
Possible duplicate of [Angular.js 1.4.7 dynamic ng-options causing mutiple method calls and infdig errors](https://stackoverflow.com/questions/33490968/angular-js-1-4-7-dynamic-ng-options-causing-mutiple-method-calls-and-infdig-erro) — Grundy, Jul 13 '17 at 12:28

score 1 · Accepted Answer · edited Jul 13 '17 at 15:14

AngularJS has a Two-Way Data Binding system, which means whenever the model (data) changes, the view is being recalculated by Angular.

In your example, the page is loading. As soon as the Angular Script starts up, the model ($scope.contactList) is being loaded.

As soon as that is done, a $compile process starts. This compile process compiles the DOM and looks for Angular Events and Data-Bindings. In your example, it will find the getInactiveCount() Two-Way Data Binding and the ng-click="addContact(...)" and add these to the Angular watcher. Now a digest cycle will start to change the watchers into variables.

During each digest-cycle, the Two-Way Data Bindings are checked on changes, and functions will be run to see if the result changes. This means that the getInactiveCount() function is called each digest cycle.

A digest cycle is called whenever variables on Angular changes, for example when you click on the Add Contact button. The addContact() function will be called, the $scope.contactList() changes and the digest cycle is being called. Now the getInactiveCount() data binding will call the function and the value shown will be updated.

You can read more about the Bootstrapping process: AngularJS Developer Guide - Bootstrap.

thanks @Sand3r205. It helped me to understand the execution :) — Nagesh Chauhan, Jul 13 '17 at 13:11

If we call angular function from html page then how it will works?

1 Answers1