title: Using Angular to validate radio button choice
body: <p>I have been given a requirement to display Yes/No radio buttons on a webpage.  In the initial state neither of these options are selected.  There needs to be validation to ensure that the user picks one of these.  I was able to do this using the browsers own form validation, like so:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Example - example-radio-input-directive-production&lt;/title&gt;
    &lt;script src="angular.min.js"&gt;&lt;/script&gt;  
  &lt;/head&gt;
  &lt;body ng-app="radioExample"&gt;
     &lt;script&gt;
     angular.module('radioExample', [])
       .controller('ExampleController', ['$scope', function($scope) {      
         $scope.submitForm = function() {
           alert('valid');
     }       
   }]);
   &lt;/script&gt;
   &lt;form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController" novalidate&gt;
     &lt;input name="question" type="radio" ng-model="question" value="yes" required&gt;Yes&lt;br/&gt;
     &lt;input name="question" type="radio" ng-model="question" value="no"&gt;No&lt;br/&gt;
     &lt;pre&gt;myForm.question.$error = {{ myForm.question.$error | json }}&lt;/pre&gt;
     &lt;div ng-messages="myForm.question.$error" role="alert"&gt;
         &lt;div ng-message="required"&gt;You did not enter a field&lt;/div&gt;
     &lt;/div&gt;
     &lt;button type="submit"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I would like to be able to make use of Angular to display the validation messages in a ng-message but am struggling to make it work:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Example - example-radio-input-directive-production&lt;/title&gt;  
    &lt;script src="angular.min.js"&gt;&lt;/script&gt;  
  &lt;/head&gt;
  &lt;body ng-app="radioExample"&gt;
     &lt;script&gt;
     angular.module('radioExample', [])
       .controller('ExampleController', ['$scope', function($scope) {       
         $scope.submitForm = function() {
           alert('valid');
         }       
       }]);
   &lt;/script&gt;
   &lt;form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController" novalidate&gt;
     &lt;input name="question" type="radio" ng-model="question" value="yes" required&gt;Yes&lt;br/&gt;
     &lt;input name="question" type="radio" ng-model="question" value="no"&gt;No&lt;br/&gt;
     &lt;pre&gt;myForm.question.$error = {{ myForm.question.$error | json }}&lt;/pre&gt;
     &lt;div ng-messages="myForm.question.$error" role="alert"&gt;
         &lt;div ng-message="required"&gt;You did not enter a field&lt;/div&gt;
     &lt;/div&gt;
     &lt;button type="submit"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What am I doing wrong?</p>