How to execute AngularJS controller function on page load ?

Last Updated : 08 Sep, 2022

In this article, we will see how to execute/call a JS function on page load using AngularJS. This function can be used to perform initialization. Calling a function or initializing a single value on page load in AngularJS is quite easy. AngularJS provides us with a dedicated directive for this specific task. It's the ng-init directive.

Syntax:

<element ng-init="function()"> 
    Contents... 
</element>

Example 1: In this example, we will call a function to initialize a variable on page load.

HTML

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
    </script>
</head>

<body ng-controller="MyController">
  
    <!-- calling the firstFunction to
        initialize gfg variable -->
    <center ng-init="firstFunction(this)">
      
        <!-- gfg variable with no value initially -->
        <h1 style="color: green;">{{gfg}}</h1>
    </center>
</body>

<script type="text/javascript">
    var myApp = angular.module('myApp', []);
    myApp.controller('MyController', 
                     ['$scope', function($scope) {
    
        // Function to be called on page load
        $scope.firstFunction = function($scope) {
          
            // We need $scope argument as we are
            // altering the variables defined in
            // the $scope
            $scope.gfg = "GeeksForGeeks"
        }
    }]);
</script>
</html>

Output: The function is called on page load and the value of variable gfg is set to GeeksForGeeks. Function Call on Page Load AngularJS output

Example 2: In this example, we will assign an object to the variable gfg and use it.

HTML

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
    </script>
</head>

<body ng-controller="MyController">

    <!-- Calling the firstFunction to
        initialize gfg variable -->
    <center ng-init="firstFunction(this)">

        <!-- gfg variable as an object -->
        <h1 style="color: green;">{{gfg.name}}</h1>
        <h3 style="color: green;">{{gfg.location}}</h3>
    </center>
</body>

<script type="text/javascript">
    var myApp = angular.module('myApp', []);
    myApp.controller('MyController', ['$scope', 
    function($scope) {
    
        // Function to be called on page load
        $scope.firstFunction = function($scope) {
    
            // We need $scope argument as we are
            // altering the variables defined in
            // the $scope
    
            // Assigning an object to the gfg variable
            $scope.gfg = {
                name: "GeeksForGeeks",
                location: "India"
            }
        }
    }]);
</script>
</html>

Output: The variable "gfg" is initialized successfully.

GFG as an object output

Example 3: In this example, we will directly initialize a variable from the ng-init directive.

HTML

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
    </script>
</head>

<body ng-controller="MyController">

    <!-- initializing the gfg variable to
        'GeeksForGeeks' -->
    <center ng-init="gfg='GeeksForGeeks'">
        <h1 style="color: green;">{{gfg}}</h1>
    </center>
</body>

<script type="text/javascript">
    var myApp = angular.module('myApp', []);
    myApp.controller('MyController', 
                     ['$scope', function($scope) {
    
    }]);
</script>

</html>

Output: The variable gfg is assigned the value "GeeksForGeeks" on page load. init value on Page Load AngularJS output