AngularJS ngvalue

  • The ng-value directive in AngularJS used to binds the given expression of an input element or a select element.
  • It is supported by <input> and <select> elements.
  • It is useful for input option values are dynamically created using ng-repeat directive.
  • ng-value directive achieves one-way binding of a given expression to an input element such as input[text] or textarea. These elements do not use ngmodel.

Syntax for ng-transclude Directive in AngularJS:

<input ng-value=”expression” ></input>

Parameter Values:

Parameter Description
expression An angular expression that will set the element’s value attribute.

Sample coding for ng-value directive in AngularJS:

 Tryit<!DOCTYPE html>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="
        <div ng-app="myApp" ng-controller="myCtrl">
        <h3>ng-value directive in AngularJS Tutorial</h3>
        <h2>Select Tutorials</h2>
        <li ng-repeat="X in names">
            <input type="radio" ng-model="my.favorite" ng-value="X">
        You choose <b>{{my.favorite}}</b> Tutorial
            var app = angular.module( "myApp" , []);
            app.controller('myCtrl', function($scope) {
                $scope.names = ['HTML', 'CSS', 'PHP'];
                $ = { favorite: 'CSS' };

Code Explanation for ng-value directive in AngularJS:

Code Explanation for AngularJS ngvalue

  1. The ng-app specifies the root element ("myApp") to define AngularJS application.
  2. The ng-controller controls the data of “myCtrl” in AngularJS application.
  3. The ng-repeat directive is used for repeats a set of names (X in names) in a given number of times and the output will be updated in the <li> tag.
  4. The “radio” is declare the type value of the <input> tag.
  5. ng-model binds the value from the HTML control to application data.
  6. ng-transclude directive is used to include the existing content “AngularJS” .
  7. The ng-value directive is used for sets the value attribute of an input element “X”.
  8. The ng-value directive shows the “you choose CSS Tutorial” when the valid text is given in the input.
  9. $ is used to declare the scope object as HTML, CSS, PHP in array format.
  10. The value is given as my in the scope object and the output will be displayed in the <div> tag.

Sample Output for ng-value directive in AngularJS:

Sample Output1 for AngularJS ngvalue

  1. When the page is loading the output displays the default value of CSS in the input field.

Sample Output2 for AngularJS ngvalue

  1. If the user click the PHP button in the input field and output displays the value as “you choose PHP tutorial”.

Related Searches to angularjs ngvalue directive