How to get the value of radio button using AngularJS ?

Last Updated : 01 Aug, 2022

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.

<!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>

 
<!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.