How to execute AngularJS controller function on page load ? Last Updated : 08 Sep, 2022 Comments Improve Suggest changes Like Article Like Report 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. 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. 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. Create Quiz Comment T thvardhan Follow 0 Improve T thvardhan Follow 0 Improve Article Tags : Web Technologies AngularJS AngularJS-Questions Explore AngularJS BasicsAngularJS Tutorial 5 min read Introduction to AngularJS 4 min read Angular CLI | Angular Project Setup 3 min read AngularJS Expressions 2 min read AngularJS Modules 3 min read AngularJS ng-model Directive 4 min read AngularJS Data Binding 4 min read AngularJS Controllers 3 min read AngularJS | Scope 2 min read AngularJS Services 4 min read AngularJS | AJAX - $http 3 min read AngularJS | Tables 2 min read AngularJS Select Boxes 2 min read AngularJS SQL 3 min read AngularJS HTML DOM 2 min read AngularJS Events 3 min read AngularJS | Forms 3 min read AngularJS Form Validation 3 min read AngularJS | API 2 min read AngularJS and W3.CSS 2 min read AngularJS Includes 3 min read AngularJS Animations 1 min read AngularJS | Application 3 min read AngularJS DirectivesAngularJS Directives 9 min read AngularJS ng-app Directive 1 min read AngularJS ng-bind Directive 2 min read AngularJS ng-bind-html Directive 2 min read AngularJS ng-bind-template Directive 2 min read AngularJS ng-blur Directive 1 min read AngularJS ng-change Directive 2 min read AngularJS ng-checked Directive 2 min read AngularJS ng-class Directive 2 min read AngularJS ng-class-even Directive 2 min read AngularJS ng-class-odd Directive 2 min read AngularJS ng-click Directive 2 min read AngularJS ng-cloak Directive 2 min read AngularJS ng-controller Directive 2 min read AngularJS Directives Complete Reference 2 min read AngularJS FiltersAngularJS | Filters 7 min read AngularJS currency Filter 2 min read AngularJS | date Filter 2 min read AngularJS filter Filter 3 min read AngularJS json Filter 2 min read AngularJS limitTo Filter 2 min read AngularJS lowercase Filter 1 min read AngularJS number Filter 1 min read AngularJS orderBy Filter 4 min read AngularJs uppercase Filter 1 min read AngularJS Converting FunctionsAngularJS angular.lowercase() Function 2 min read AngularJS angular.uppercase() Function 1 min read AngularJS angular.forEach() Function 1 min read AngularJS Comparing FunctionsAngularJS angular.isArray() Function 2 min read AngularJS angular.isDate() Function 2 min read AngularJS angular.isDefined() Function 2 min read AngularJS angular.isElement() Function 2 min read AngularJS angular.isFunction() Function 2 min read AngularJS angular.isNumber() Function 2 min read AngularJS angular.isObject() Function 2 min read AngularJS | angular.isString() Function 1 min read AngularJS angular.isUndefined() Function 2 min read AngularJS angular.equals() Function 2 min read AngularJS angular.toJson() Function 2 min read AngularJS QuestionsHow to bundle an Angular app for production? 4 min read How to add many functions in one ng-click directive? 2 min read How to directly update a field by using ng-click in AngularJS ? 3 min read How to Add Dynamic Options for Multiple Selects Inside ng-repeat Directive ? 3 min read How to detect when an @Input() value changes in Angular? 3 min read How to open popup using Angular and Bootstrap ? 2 min read How to reload or re-render the entire page using AngularJS? 2 min read How to add input fields dynamically on button click in AngularJS ? 2 min read How to Create Button Dynamically with Click Event in Angular ? 2 min read How to use jQuery in Angular ? 2 min read AngularJS Examples 2 min read Like