How to bind the radio buttons in AngularJs?

What is radio button binding in AngularJs?

The radio buttons is a form controls used to handle the yes or no selection process in a form.

We are going to explain to the single selection radio buttons for GENDER as given below.

The AngularJs code-sample

var app = angular.module('radiobtnApp', []);
app.controller('radiobtnCtrl', function ($scope) {
    $scope.getGender = function () {
        return true;
    };
});

The HTML code-sample

<div ng-app="radiobtnApp">
    <div ng:controller="radiobtnCtrl">
        <h1>Binding Radio buttons in AngularJs</h1>
        Select your Gender : <br />
        <input type="radio" name="gender" ng-model="getGender()" ng-value="true">Male
        <input type="radio" name="gender" ng-model="getGender()" ng-value="false">Female
    </div>
</div>

The Full live demo code-sample

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Binding Radio buttons in AngularJs</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
    <script>
        var app = angular.module('radiobtnApp', []);

        app.controller('radiobtnCtrl', function ($scope) {
            $scope.getGender = function () {
                return true;
            };
        });
    </script>
</head>
<body ng-app="radiobtnApp">
    <div ng:controller="radiobtnCtrl">
        <h1>Binding Radio buttons in AngularJs</h1>
        Select your Gender : <br />
        <input type="radio" name="gender" ng-model="getGender()" ng-value="true">Male
        <input type="radio" name="gender" ng-model="getGender()" ng-value="false">Female
    </div>
</body>
</html>

The output:

About Blogger

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz