Multiple sets of radio button with ng-model and ng-repeat - angularjs

Question

I'm very new to Angular and I have some issues with setting the default option on my radio buttons. I have already checked the other answers and using $parent does not solve my issue or I'm using it wrong.
I have a group of radio button which contains 2 input:
input type="radio" name="#{{ form.form_id }}_#{{ $index }}" ng-model="$parent.field.field_data.suggested" value="#{{ field.field_data.value_a}}" > #{{ field.field_data.value_a }} <br>
input type="radio" name="#{{ form.form_id }}_#{{ $index }}" ng-model="$parent.field.field_data.suggested" value="#{{ field.field_data.value_b }}"> #{{ field.field_data.value_b }}
If the page displays only 1 group(pair) of radio button, it correctly sets the default value for the radio button group. The issue here is, when there are 3 groups (3 pairs) of radio button generated by ng-repeat, it only sets the value of the last group of radio buttons and the other 2 groups are left unchecked or blank.
Is this because the radio buttons are generated using 2 ng-repeats? To help, here is my code.
I have an array $scope.filtered_forms which is set by:
$scope.filtered_forms[index] = {
form_id:id,
fields:[{
field_data: {field.label,
field_suggested:string,
value_a:string,
value_b:string},
field_type: radio
},{
field_data: {field.label,
field_suggested:string,
value_a:string,
value_b:string},
field_type radio
},{
...same input as above each object represents a group of radio
}]
}
Basically, $scope.filtered_forms contains form objects. In my html file, I have this:
<div ng-repeat="form in filtered_forms" id="#{{ form.form_id }}">
<table class="table" id="borderless">
<tr ng-repeat="field in form.fields">
<th scope="row" width="35%">#{{ field.field_data.label }}</th>
<td>
<div ng-if="field.field_type == 'radio'" style="margin-bottom: 10px">
<input type="radio" name="#{{ form.form_id }}_#{{ $index }}" ng-model="$parent.field.field_data.suggested" value="#{{ field.field_data.value_a}}" > #{{ field.field_data.value_a }} <br>
<input type="radio" name="#{{ form.form_id }}_#{{ $index }}" ng-model="$parent.field.field_data.suggested" value="#{{ field.field_data.value_b }}"> #{{ field.field_data.value_b }}
</div>
</td>
</tr>
/table>
This right here produces 2 groups/pairs of radio buttons but only the last group gets a default value. Even when using ng-checked and even without $parent.
Additional info, field_suggested has the same value as value_a or value_b. You can see that the radio button is under 2 ng-repeats. I'm using laravel blade and this html file is inside a modal. I removed some of the html data and property inside the form which does not relate to the issue.
Any help is appreciated.
Thanks!

Answer 1

You seem to have mixing many things. I copied your code created a plunker and found that the name for the radio group is not actually form_id_{{$index}} but it has whole object as string. I have changed the code hope it helps you.
See the code here
The issue is with your group names why are you using # in the names. Please remove them it should work fine. Also please see that there are no special characters in the value for name attribute.
name="{{ form.form_id }}_{{ $index }}"