title: Multiple sets of radio button with ng-model and ng-repeat
body: <p>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 <code>$parent</code> does not solve my issue or I'm using it wrong.</p>
  
  <p>I have a group of radio button which contains 2 input:</p>
  
  <pre><code>input type="radio" name="@{{ form.form_id }}_@{{ $index }}" ng-model="$parent.field.field_data.suggested" value="@{{ field.field_data.value_a}}" &gt; @{{ field.field_data.value_a }} &lt;br&gt;
  input type="radio" name="@{{ form.form_id }}_@{{ $index }}" ng-model="$parent.field.field_data.suggested" value="@{{ field.field_data.value_b }}"&gt; @{{ field.field_data.value_b }}
  </code></pre>
  
  <p>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.</p>
  
  <p>Is this because the radio buttons are generated using 2 ng-repeats? To help, here is my code.</p>
  
  <p>I have an array <code>$scope.filtered_forms</code> which is set by:</p>
  
  <pre><code>$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
               }]
  }
  </code></pre>
  
  <p>Basically, <code>$scope.filtered_forms</code> contains form objects. In my html file, I have this:</p>
  
  <pre><code>&lt;div ng-repeat="form in filtered_forms" id="@{{ form.form_id }}"&gt;
   &lt;table class="table" id="borderless"&gt;
         &lt;tr ng-repeat="field in form.fields"&gt;
                &lt;th scope="row" width="35%"&gt;@{{ field.field_data.label }}&lt;/th&gt;
                   &lt;td&gt;
                      &lt;div  ng-if="field.field_type == 'radio'" style="margin-bottom: 10px"&gt;
                          &lt;input type="radio" name="@{{ form.form_id }}_@{{ $index }}" ng-model="$parent.field.field_data.suggested" value="@{{ field.field_data.value_a}}" &gt; @{{ field.field_data.value_a }} &lt;br&gt;
                          &lt;input type="radio" name="@{{ form.form_id }}_@{{ $index }}" ng-model="$parent.field.field_data.suggested" value="@{{ field.field_data.value_b }}"&gt; @{{ field.field_data.value_b }}
                      &lt;/div&gt;
                   &lt;/td&gt;
           &lt;/tr&gt;
     /table&gt;
  </code></pre>
  
  <p></p>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p>Any help is appreciated.</p>
  
  <p>Thanks!</p>