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. Comment More infoAdvertise with us Next Article How to execute AngularJS controller function on page load ? T thvardhan Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Questions Similar Reads How to call an AngularJS Function inside HTML ? A Function is a set of statements that takes input, does some specific computation, and produces output. In this article, we will learn How to Call an AngularJS function inside HTML. To achieve this, we can use {{...}} to call the function from HTML. We can also pass arguments and return the result 3 min read How to call a function on click event in Angular2 ? A Function is a set of statements that takes input, does some specific computation, and produces output. An on click event occurs when the user clicks on an element. In this article, we will see How to call a function on click event in Angular2, along with understanding the basic implementation thro 3 min read How to create nested controllers in Angular.js ? A controller in AngularJS is a JavaScript object created with the help of a JavaScript object constructor. A controller can contain properties and functions. Controllers are used for controlling the application data of an AngularJS application. In this article, we will see the nested controllers in 4 min read How to use filter within controllers in AngularJS ? In this article, we will see how to use the Filter inside the controller using AngularJS. Filters are used to format the value of an expression and display it to the user. It can be used in HTML Previews, Controllers or Services, and directives. AngularJS facilitates many built-in filters, although, 4 min read How to share data between controllers in AngularJS ? The task is to share data variables between two or more controllers by using AngularJS. There are many procedures to achieve this. Here we will discuss the most popular ones. Approach: To share data between the controllers in AngularJS we have two main cases: Share data between parent and child: Her 3 min read How to insert HTML into view from AngularJS controller? The ng-bind-html directive is a secure way of binding content to an HTML element. So in order to insert HTML into view, we use the respective directive. While using AngularJS, write HTML in our corresponding application, we should check the HTML for dangerous or error prone code. By including the "a 2 min read AngularJS ng-controller Directive The ng-controller Directive in AngularJS is used to add a controller to the application. It can be used to add methods, functions, and variables that can be called on some event like click, etc to perform certain actions. Syntax: <element ng-controller="expression"> Contents... </element 2 min read How to execute a routing in the AngularJS framework ? In this article, we will learn about how we can perform routing in AngularJS, along with understanding its implementation through the code example. Â Routing in AngularJS helps to develop Single Page Applications, which is a web app that loads only a single page, and the part of the page instead of t 6 min read How to detect a route change in AngularJS ? In this article, we will see how to detect a route change in AngularJS. In order to detect route change at any moment in AngularJS, this can be achieved by using the $on() method. The $on() method is an event handler, the event which will handle $routeChangeSuccess which gets triggered when route/vi 2 min read How to set focus on input field automatically on page load in AngularJS ? We can focus on any input field automatically using the angular directives. Here we create a custom directive that can auto-focus on any field in the form. Creating a custom directive is just like creating an Angular component. To create a custom directive we have to replace @Component decorator wit 3 min read Like