If radio button values are not binding correctly in AngularJS, it could be due to several common mistakes, such as:
- Missing
ng-modelbinding - Incorrectly setting values (e.g., using
valueinstead ofng-value) - Scope issues preventing data from updating
- Not using a proper controller to manage data
Step 1: Basic Working Example of Radio Button Binding
Before debugging, ensure you’re using AngularJS radio buttons correctly.
Correct Example: Two-Way Binding of Radio Buttons
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radio Button Binding in AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myController">
<h3>Select Gender:</h3>
<label>
<input type="radio" name="gender" ng-model="user.gender" ng-value="'Male'"> Male
</label>
<label>
<input type="radio" name="gender" ng-model="user.gender" ng-value="'Female'"> Female
</label>
<h4>Selected Gender: {{ user.gender }}</h4>
<script>
var app = angular.module("myApp", []);
app.controller("myController", function ($scope) {
$scope.user = {
gender: ''
};
});
</script>
</body>
</html>
Why This Works?
- Uses
ng-model="user.gender"for two-way binding. - Uses
ng-value="'Male'"andng-value="'Female'"to set values correctly.
Step 2: Common Issues & Fixes
Issue 1: Missing ng-model
Incorrect:
<input type="radio" name="gender" value="Male">
Fix: Add ng-model
<input type="radio" name="gender" ng-model="user.gender" ng-value="'Male'">
Why?
Without ng-model, AngularJS cannot track the selected value.
Issue 2: Using value Instead of ng-value
Incorrect:
<input type="radio" name="gender" ng-model="user.gender" value="Male">
Fix: Use ng-value="'Male'"
<input type="radio" name="gender" ng-model="user.gender" ng-value="'Male'">
Why?
value="Male"is a static HTML attribute and does not bind dynamically.ng-value="'Male'"ensures the value is assigned as a string in AngularJS.
Issue 3: Not Using Quotes in ng-value for Strings
Incorrect:
<input type="radio" name="gender" ng-model="user.gender" ng-value=Male>
Fix: Add quotes around string values
<input type="radio" name="gender" ng-model="user.gender" ng-value="'Male'">
Why?
Without quotes, Angular tries to evaluate Male as a variable instead of a string.
Issue 4: ng-model Is Inside ng-repeat But Not Working
Incorrect:
<div ng-repeat="option in ['Yes', 'No']">
<input type="radio" name="choice" ng-model="user.choice" ng-value=option> {{ option }}
</div>
Fix: Use ng-value="'{{ option }}'"
<div ng-repeat="option in ['Yes', 'No']">
<input type="radio" name="choice" ng-model="user.choice" ng-value="option"> {{ option }}
</div>
Why?
ng-value="option"ensures the value is dynamically assigned fromng-repeat.
Issue 5: ng-model Does Not Update the Controller Scope
Incorrect:
<input type="radio" name="gender" ng-model="user.gender" ng-value="'Male'">
<input type="radio" name="gender" ng-model="user.gender" ng-value="'Female'">
<button ng-click="submit()">Submit</button>
app.controller("myController", function () {
var user = {
gender: ''
};
});
Fix: Use $scope.user instead of a local variable
app.controller("myController", function ($scope) {
$scope.user = {
gender: ''
};
});
Why?
Without $scope, AngularJS cannot track the changes in the view.
Step 3: Final Working Example with All Fixes
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radio Button Binding - Fixed</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myController">
<h3>Select a Gender:</h3>
<label>
<input type="radio" name="gender" ng-model="user.gender" ng-value="'Male'"> Male
</label>
<label>
<input type="radio" name="gender" ng-model="user.gender" ng-value="'Female'"> Female
</label>
<h3>Select a Choice:</h3>
<div ng-repeat="option in ['Yes', 'No']">
<label>
<input type="radio" name="choice" ng-model="user.choice" ng-value="option"> {{ option }}
</label>
</div>
<h4>Selected Gender: {{ user.gender }}</h4>
<h4>Selected Choice: {{ user.choice }}</h4>
<button ng-click="submit()">Submit</button>
<script>
var app = angular.module("myApp", []);
app.controller("myController", function ($scope) {
$scope.user = {
gender: '',
choice: ''
};
$scope.submit = function () {
alert("Selected Gender: " + $scope.user.gender + "\nSelected Choice: " + $scope.user.choice);
};
});
</script>
</body>
</html>