Open In App

AngularJS ng-init Directive

Last Updated : 28 Jul, 2022
Suggest changes
Share
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:

 

Explore