AngularJS ng-init Directive Last Updated : 28 Jul, 2022 Comments Improve Suggest changes Like Article Like Report The ng-init Directive is used to initialize AngularJS Application data. It defines the initial value for an AngularJS application and assigns values to the variables. The ng-init directive defines initial values and variables for an AngularJS application. Syntax: <element ng-init = "expression"> ... </element>Example: This example describes the ng-init Directive by initializing an array of strings. HTML <!DOCTYPE html> <html> <head> <title> AngularJS ng-init Directive </title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> </head> <body> <h1 style="color:green"> GeeksforGeeks </h1> <h3>ng-init directive</h3> <div ng-app="" ng-init="sort=['quick sort', 'merge sort', 'bubble sort']"> Sorting techniques: <ul> <li>{{ sort[0] }} </li> <li>{{ sort[1] }} </li> <li>{{ sort[2] }} </li> </ul> </div> </body> </html> Output: Example 2: The example describes the ng-init Directive by specifying the object with its properties & associated value of it. HTML <!DOCTYPE html> <html> <head> <title> AngularJS ng-init Directive </title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> </head> <body style="text-align: center"> <h1 style="color:green"> GeeksforGeeks </h1> <h3>ng-init directive</h3> <div ng-app="" ng-init= "objects={ Company:'GeeksforGeeks', Course:'Data Structures & Algorithms' }"> <p> Learn {{ objects.Course }} from {{ objects.Company }} </p> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article AngularJS ng-init Directive V Vishal Chaudhary 2 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives Similar Reads AngularJS ng-if Directive The ng-if Directive in AngularJS is used to remove or recreate a portion of the HTML element based on an expression. The ng-if is different from the ng-hide directive because it completely removes the element in the DOM rather than just hiding the display of the element. If the expression inside it 2 min read AngularJS ng-include Directive AngularJS has a built-in directive to include the functionality from other AngularJS files by using the ng-include directive. The primary purpose of the ng-include directive is used to fetch, compile, and include an external HTML file in the main AngularJS application. These are added as child nodes 2 min read AngularJS ng-href Directive The ng-href directive is used when we have an angular expression inside the href value. If href attribute is used then the problem is that if in case the link is clicked before AngularJS has replaced the expression with its value then it may go to the wrong URL and the link will be broken and will m 2 min read AngularJS ng-form Directive The ng-form Directive in AngularJS is used to create a nested form i.e. one form inside the other form. It specifies an inherit control from the HTML form. It creates a control group inside a form directive which can be used to determine the validity of a sub-group of controls. Syntax: <ng-form [ 1 min read AngularJS ng-open Directive The ng-open Directive in AngularJS is used to specify the open attribute of the specified HTML element. If the expression inside the ng-open directive returns true then the details will be shown otherwise they will be hidden. Syntax: <element ng-open="expression"> Contents... <element> P 1 min read Like