Getting the Value of Radio Button - html

Question

Edit:
I am getting undefined when I tried to submit the ng-model of the radio.
Sample code in my submit button:
ng-click="addSubscriber(plan)"
Tried to console.log(plan) inside the addSubscriber() but getting undefined.
I am having headache because of the problem of getting the selected value of radio button. The value is showing and it is rendering radio depends on my data. But ng-model doesn't work, I can't get the value of selected radio.
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div ng-repeat="plan in plans" class="radio">
<label><input type="radio" ng-model="plan.plan" value="{{plan.plan_code}}" name="plan.plan_name">{{plan.plan_name | capitalize}}
</label>
</div>
</div>
<pre>{{plan.plan}}</pre>
</div>
No value is showing in <pre> tag. I searched and tried some posted answers in other topics but its not working.

Answer 1

Update:
Another problem was that the ng-model inside the ng-repeat was unable to update the controller variable, this is due to that fact that.
ng-repeat directive creates a new scope.
Thus we need to change the ng-model from chosenPlan to $parent.chosenPlan, which will update the parent scope instead.
In the above scenario, the input radio buttons need to be set under a common name for them to act as group of radio buttons. The value of the radio button also needs to be set to a common variable which can be used in the submit function.
<label>
<input type="radio" ng-model="$parent.chosenPlan" ng-value="plan.plan_code" name="test"/>
{{plan.plan_name | capitalize}}
</label>
In the above form we can see that the ng-model is set to a common variable. The group name name attribute is set to a common name.
Please find below a working model of the same.
JSFiddle Demo
Old Answer:
The <pre> tag lies outside the ng-repeat move it inside, change the value to ng-value as shown below. Name for it to have the proper value should be name="{{plan.plan_name}}". Let me know if you face any issues.
<div ng-controller='MyController'>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div ng-repeat="plan in plans" class="radio">
<label>
<input type="radio" ng-model="plan.plan" ng-value="plan.plan_code" name="{{plan.plan_name}}"/>{{plan.plan_name | capitalize}}
</label>
<pre>{{plan.plan}}</pre>
</div>
</div>
</div>
</div>
Mocked up the data and providing an example for reference:
JSFiddle Demo

Answer 2

Your <pre>{{plan.plan}}</pre> is out of the scope of the ng-repeat so plan.plan is unrecognized. If you would like to show a value for each radio button, you can try it like that -
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div ng-repeat="plan in plans" class="radio">
<label><input type="radio" ng-change="radioChanged()" ng-model="plan.plan" value="{{plan.plan_code}}" name="plan.plan_name">{{plan.plan_name}}
</label>
<pre>{{plan.plan}}</pre>
</div>
</div>
I have also added a 'ng-change' function, so you can try to put some debugger inside that function and watch the changed value inside your controller.