using ng-model with multiple ng-repeated radio button groups

Question

See JsBin

I have a dynamic list of checkpoints which is generated from ng-repeat , each item has six radio buttons. I need to bind each of these sets to a $scope object.

Below, you can see I've set the name to things like selectedOption1 , selectedOption2 , etc... This allows each ng-repeated list to be independent of the next. Now, I need to bind the selected option of those selectedOptionX groups to a $scope object, while still maintaining the checkpoint.Name in the object.

<table>
  <tbody>
    <tr ng-repeat="checkpoint in checkpoints">
      <td>{{checkpoint.Name}}</td>
      <td><input type="radio" name="selectedOption{{$index}}" value="pass" /></td>
      <td><input type="radio" name="selectedOption{{$index}}" value="fail" /></td>
      <td><input type="radio" name="selectedOption{{$index}}" value="remediated" /></td>
      <td><input type="radio" name="selectedOption{{$index}}" value="nc" ng-checked="true" /></td>
      <td><input type="radio" name="selectedOption{{$index}}" value="na" /></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

The output object might be something like:

[
    {
        Name: "the first checkpoint",
        Value: "remediated"
    },
    {
        Name: "the second checkpoint",
        Value: "fail"
    },
    {
        Name: "the third checkpoint",
        Value: "pass"
    },
];

What I've tried...

<td><input type="radio" name="selectedOption{{$index}}" value="pass" ng-model="selectedOption{{$index}}"/></td>

//and
<td><input type="radio" name="selectedOption{{$index}}" value="pass" ng-model="selectedOption[$index]"/></td>

//and
<td><input type="radio" name="selectedOption{{$index}}" value="pass" ng-model="selectedOption.$index"/></td>

//and
<td><input type="radio" name="selectedOption{{$index}}" value="pass" ng-model="checkpoint.Name"/></td>

I've tried some other things, too, but nothing has come close.

Answer 1

http://jsbin.com/haxor/1/edit

<table>
      <tbody>
        <tr ng-repeat="checkpoint in checkpoints">
          <td>{{checkpoint.Name}}</td>
          <td><input type="radio" ng-model="checkpoint.selectedOption" value="pass" name="selectedOption{{$index}}"></td>
          <td><input type="radio" ng-model="checkpoint.selectedOption" value="fail" name="selectedOption{{$index}}"></td>
          <td><input type="radio" ng-model="checkpoint.selectedOption" value="remediated" name="selectedOption{{$index}}"></td>
          <td><input type="radio" ng-model="checkpoint.selectedOption" value="nc"  name="selectedOption{{$index}}" ng-checked="true"></td>
          <td><input type="radio" ng-model="checkpoint.selectedOption" value="nc" ng-checked="true"  name="selectedOption{{$index}}"></td>
          <td><input type="radio" ng-model="checkpoint.selectedOption" value="x"  name="selectedOption{{$index}}"></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>

Answer 2

Try this, it will setup selected value inside checkpoints object

http://jsbin.com/barufuhi/3/edit

<div ng-controller="CheckpointsController">
<table>
  <tbody>
    <tr ng-repeat="checkpoint in checkpoints">
      <td>{{checkpoint.Name}}</td>
      <td><input type="radio" ng-model="checkpoint.value" value="one"></td>
      <td><input type="radio" ng-model="checkpoint.value" value="two"></td>
      <td><input type="radio" ng-model="checkpoint.value" value="three"></td>
      <td><input type="radio" ng-model="checkpoint.value" value="four"></td>
      <td><input type="radio" ng-model="checkpoint.value" value="five"></td>
      <td><input type="radio" ng-model="checkpoint.value" value="six"></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
</div>