AngularJS ng-init Directive
Last Updated :
28 Jul, 2022
Improve
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.
<!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.
<!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:
