Use ng-message with ng-requried

Question

I have a form that validates a radio input. The radio input is required (The user has to choose one of the radio fields before clicking on the submit button). I'm using for that ng-required in the input radio.

The radio input looks like something like this :

<input type="radio" name="myRadio" value="1" ng-model="theModel" ng-required="!theModel">
<input type="radio" name="myRadio" value="2" ng-model="theModel" ng-required="!theModel">
<input type="radio" name="myRadio" value="3" ng-model="theModel" ng-required="!theModel">

I want to show a message in my form once the user submits. I use for that the ng-message directive. I use it this way :

<div class="msg-error-input" ng-if="!theModel" ng-messages="myForm.myRadio" role="alert">
    <div class="icon my-icon" ng-message="required">
        It has to show an error here. But this doesn't seem to work ! It seems that there's no link between the ng-message='required' and the ng-required..
    </div>
</div>

Answer 1

I resolved that by doing :

<form name="myForm" id="myForm">
<input type="radio" name="myRadio" value="1" ng-model="theModel" ng-required="!theModel">
<input type="radio" name="myRadio" value="2" ng-model="theModel" ng-required="!theModel">
<input type="radio" name="myRadio" value="3" ng-model="theModel" ng-required="!theModel">
<div class="msg-error-input" ng-if="!theModel && submitted" ng-messages="myForm.myRadio" role="alert">
    <div class="icon my-icon" ng-message="required">
        It has to show an error here. But this doesn't seem to work ! It seems that there's no link between the ng-message='required' and the ng-required..
    </div>
</div>
<button type="submit" data-ng-click="submitted"/>
</form>

( I saw that the ng-submitted was not added to my form, so I added a variable submitted on click )