AngularJS ng-value Directive
Last Updated :
11 Jul, 2025
Improve
The ng-value Directive in AngularJS is used to specify the value of an input element. This directive can be used to achieve the one-way binding for the given expression to an input element, especially when the ng-model directive is not used for that specific element. It is supported by <input> and <select> elements.
Syntax:
<element ng-value="expression">
Content ...
</element> Parameter value:
- expression: It specifies the value that is bound with the element's value attribute & value property. It is of string type.
Example 1: This example describes the basic usage of the ng-value Directive in AngularJS.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style>
body {
text-align: center;
font-family: 'Times New Roman', Times, serif;
}
h1 {
color: green;
}
</style>
</head>
<body ng-app="gfg" ng-controller="geek">
<h1>GeeksforGeeks</h1>
<h3>ng-value Directive</h3>
<input ng-value="displayVal">
<script>
var app = angular.module('gfg', []);
app.controller('geek', function ($scope) {
$scope.displayVal = "GeeksforGeeks";
});
</script>
</body>
</html>
Output:
Example 2: This example describes the ng-value directive in AngularJS, where a value is selected from the list & correspondingly, rendering that value.
<!DOCTYPE html>
<html>
<head>
<title>ng-value Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
</script>
</head>
<body ng-app="app" style="padding:20px">
<h1 style="color:green;">GeeksforGeeks</h1>
<h2>ng-value Directive</h2>
<p>Choose one:</p>
<div ng-controller="geek">
<div ng-repeat="l in sort">
<input type="radio"
ng-model="my.fav"
ng-value="l"
name="Sort"> {{l}}
</div>
<pre>Selected choice is: {{my.fav}}</pre>
</div>
<script>
var app = angular.module("app", []);
app.controller('geek', ['$scope', function ($scope) {
$scope.sort = [
'Merge Sort',
'Quick Sort',
'Bubble Sort'
];
$scope.my = { fav: 'Merge Sort' };
}]);
</script>
</body>
</html>
Output:
