AngularJS ng-init Directive

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>