Validate Radio Button AngularJS
Try using ng-required="!color". This makes it so that the field is only required when the value is not set. If a value is set, then required is removed and it will pass validation.
<input type="radio" ng-model="color" value="red" ng-required="!color"> Red <br/><input type="radio" ng-model="color" value="green" ng-required="!color"> Green <br/><input type="radio" ng-model="color" value="blue" ng-required="!color"> Blue <br/>Here is an updated plunker that demonstrates that the form now validates correctly:http://plnkr.co/edit/EdItU2IIkO1KIsC052Xx?p=preview
Update
e-cloud's answer is simple and doesn't require an additional directive. I suggest everyone use that method if possible. Leaving this answer here as it does provide a working solution and demonstrates the use of the ng-required directive.
I think what you need is to add a name for the radio group, for a radio input need a name to determine which it belongs to, the link below works validation without ng-required(the accepted answer)
<input type="radio" name='group' ng-model="color" value="red" required> Red <br/><input type="radio" name='group' ng-model="color" value="green" required> Green <br/><input type="radio" name='group' ng-model="color" value="blue" required> Blue <br/>
Alternative solution using a directive. Accepted answer didn't work for me in Firefox (v 33.0).
The idea was to set the required attribute to false on all radios with a specific class name, on change.
- jQuery was added because I was having trouble with the jqlite remove attribute function.
- I copied as much as possible from the original plunker.
http://plnkr.co/edit/nbzjQqCAvwNmkbLW5bxN?p=preview
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Example - example-radio-input-directive-production</title> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script></head><body ng-app="radioExample"> <script> angular.module('radioExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.myObject= {}; $scope.specialValue = { "id": "12345", "value": "green" }; $scope.submitForm = function() { alert('valid'); } }]) .directive('colorChoice', function() { return { restrict: 'E', template: '<div ng-repeat="c in colors"><input class="colorClass" type="radio" value={{c}} ng-model="myObject.color" required />{{c}}</div>', link: function(scope, element, attrs) { scope.colors = ['Red', 'Green', 'Blue']; element.on('change', function(){ $(".colorClass").attr("required", false); }); } } }); </script> <form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController"> <color-choice></color-choice> <tt>color = {{myObject.color | json}}</tt><br/> <button type="submit">Submit</button> </form></body></html>