How to get the value of radio button using AngularJS ? Last Updated : 01 Aug, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report In this article, we will see how to get the value of the radio button using AngularJS, along with understanding the basic implementation through illustrations. The value of the checked radio button can be fetched with the help of the ng-model directive that helps to bind the data with the specific element & stores the required value in a variable, that can be utilized whenever we require that particular value. Example 1: In this example, the selected value will be rendered with an alert message, on clicking the button. HTML <!DOCTYPE HTML> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"> </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function($scope) { $scope.selectedGender = ''; $scope.getVal = function(gender) { alert(gender); }; }); </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> How to get the radio button value in AngularJS </h3> <div ng-app="app"> <div ng-controller="controller"> <form action="javascript:void(0)"> Male: <input type="radio" name="userGender" ng-model='gender' value="Male" /> <br> Female : <input type="radio" name="userGender" ng-model='gender' value="Female" /> <br><br> <button ng-click="getVal(gender)"> Click here </button> </form> </div> </div> </body> </html> Output: Example 2: In this example, the selected value is shown in a <p> tag using the Interpolation in AngularJS. HTML <!DOCTYPE HTML> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"> </script> <script> var myApp = angular.module("app", []); myApp.controller("controller", function($scope) { $scope.selGender = ''; $scope.getVal = function(gender) { $scope.selGender = angular.copy(gender); }; }); </script> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> How to get the radio button value in AngularJS </h3> <div ng-app="app"> <div ng-controller="controller"> <form action="javascript:void(0)"> Male: <input type="radio" name="userGender" ng-model='gender' value="Male" /> <br> Female : <input type="radio" name="userGender" ng-model='gender' value="Female" /> <br><br> <button ng-click="getVal(gender)"> Click here </button> </form> <p>Chosen Gender = {{selGender}}</p> </div> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to get form input value using AngularJS ? P PranchalKatiyar Follow Improve Article Tags : AngularJS HTML-Misc AngularJS-Misc Similar Reads How to get form input value using AngularJS ? Given a form element and the task is to get the form values input by the user with the help of AngularJS.Approach: We are storing the data in the JSON object after the user enters it in the input element with the help of the Angular.copy(object) method. After that, data from the JSON object can be a 2 min read How to assign and read values of two different submit buttons using AngularJS? In this article, we will see how to assign and read the two different submit buttons' values in AngularJS. Usually, many websites provide relevant kinds of information and also supportive submit buttons like one or more than one also to proceed further.For instance, Users will be asked to fill out t 4 min read How to get the value of the form in Angular ? In this article, we are going to see how to get value from the form in Angular 10. We will use AbstractControl value property to get the form value in an object. Syntax: form.value Return Value: object: It is an object containing form value Approach:Â Create the Angular app to be usedIn app.componen 1 min read How to disable buttons using AngularJS ? In this article, we will see how to disable the button using the particular directive in AngularJS. Sometimes, we need to disable the button, and link on the click event. This task can be accomplished by implementing the ng-disabled directive that is used to enable or disable HTML elements. Syntax: 2 min read How to set radio button checked by button click in AngularJS ? In this article, we will see how to set the radio button checked by button click in AngularJS, along with knowing its implementation through the examples. Approach: The approach is to use the ng-checked directive to check the radio button in the DOM. In the first example, a single radio button is ch 2 min read How to set the input field value dynamically in AngularJS ? Given an input field and the task is to set the input field value dynamically with the help of AngularJS.Approach: A value is being set to the input field despite the user enter something or not. ng-click event is used to call a function that sets the value to 'This is GeeksForGeeks' with the help o 2 min read Like