Issue with angular radio input not populating the model when clicked - angularjs

Question

I have a strange issue with a radio input not populating the model of an angular form.
All fields populate the model except for the radio input...
The radio input is given at the beginning of the form below. I use ng-inspector and I can see that signupForm.member.role does not get populated when I click one of the radio values.
Can someone please help?
<form name="formCtrl" ng-submit="signup(formCtrl)" class="col-xs-12" novalidate role="form">
<h4>{{'SIGNUP_FORM_ROLE_PREFIX' | translate}}</h4>
<div class="btn-group Choix col-xs-12 text-center" data-toggle="buttons" ng-class="getCssClasses(formCtrl, formCtrl.signupRole)">
<label class="btn StateButton col-xs-6">
<img class="img-responsive" src="assets/media/img/parents.svg" />
<input type="radio" name="signupRole" ng-model="signupForm.member.role" value="ROLE_BASIC_PARENTS" ng-required="true" />
<span class="help-block">{{'DOMAIN_ENUM_' + 'ROLE_BASIC_PARENTS' | translate}}</span>
</label>
<label class="btn StateButton col-xs-6">
<img class="img-responsive" src="assets/media/img/professionel.svg" />
<input type="radio" name="signupRole" ng-model="signupForm.member.role" value="ROLE_BASIC_CHILDCARE_WORKER" ng-required="true" />
<span class="help-block">{{'DOMAIN_ENUM_' + 'ROLE_BASIC_CHILDCARE_WORKER' | translate}}</span>
</label>
<div ng-messages="formCtrl.signupRole.$error" ng-if="formCtrl.$submitted">
<div ng-message="required" class="control-label">{{'SIGNUP_FORM_ROLE_REQUIRED'| translate}}</div>
</div>
</div>
<hr>
<div class="form-group" ng-class="getCssClasses(formCtrl, formCtrl.firstName)">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon icon-Prenom" aria-hidden="true"></span>
</span>
<input type="text" name="firstName" ng-minlength="2" placeholder="{{'SIGNUP_FORM_FIRST_NAME' | translate}}" ng-model="signupForm.member.firstName" ng-required="true" class="form-control" />
<span ng-if="isSuccessFeedback(formCtrl, formCtrl.firstName)" class="form-control-feedback" aria-hidden="true"><span class="glyphicon icon-Valid" aria-hidden="true"></span></span>
<span ng-if="isErrorFeedback(formCtrl, formCtrl.firstName)" class="form-control-feedback" aria-hidden="true"><span class="glyphicon icon-Erreur" aria-hidden="true"></span></span>
</div>
<div ng-messages="formCtrl.firstName.$error" ng-if="formCtrl.$submitted">
<div ng-message="required" class="control-label">{{'SIGNUP_FORM_FIRST_NAME_REQUIRED' | translate}}</div>
<div ng-message="minlength" class="control-label">{{'SIGNUP_FORM_FIRST_NAME_REQUIRED' | translate }}</div>
</div>
</div>
</form>
Here is a working plunker: http://plnkr.co/edit/lsaevbL0mBRku7zcrGDJ
One can notice that the radio is not taken into account when the form is submitted even if one of the radios is selected...

Answer 1

Simply use value instead of ng-value. Please see this working demo: http://plnkr.co/edit/2EB4NvTO1StN50NIXOyn?p=preview.
You should not use ng-value, which is looking for $scope.ROLE_BASIC_PARENTS.
Check AngularJS.org, the example there use:
<input type="radio" ng-model="color.name" ng-value="specialValue">
And in the controller:
$scope.specialValue = {
"id": "12345",
"value": "green"
};