using ng-model with radio buttons inside nested ng-repeat not working

Question

Hey i'm trying to display a list of radio buttons inside an ng-repeat and it doesn't seem to be taking in the initial values of the fields i bind to ng-model on the input.

When i give a simple array to an ng-repeat, the buttons are displayed with the initial values properly. But if a nested ng-repeat comes into the picture, only the last item of each list initializes with a value

Here's my pen:

https://codepen.io/alokraop/pen/JXLZBp

I have no idea where i'm going wrong. I'm making sure that the name attribute of the radio button is unique to each group.

Appreciate the help.

Answer 1

The issue here is that you can't interpolate an Angular value into the attr name. If we remove the name attr from our HTML, we get the expected result. See Below.

<div ng-app="sample">
  <div ng-controller="sampleController as sample">
    Single ng-repeat:
    <div ng-repeat="queue in sample.queues">{{queue.name}} status:
      <input type="radio" name="queue-{{$index}}" ng-model="queue.condition" value="hooked" /> hooked
      <input type="radio" name="queue-{{$index}}" ng-model="queue.condition" value="unhooked" /> unhooked
      <input type="radio" name="queue-{{$index}}"  ng-model="queue.condition" value="partial" /> partial
    </div>
    <br />
    Nested ng-repeat:
    <div ng-repeat="qm in sample.qms">
      {{qm.name}} queues:
      <div ng-repeat="queue in qm.queues">{{queue.name}} status:
        <input type="radio" ng-model="queue.condition" value="hooked" /> hooked
        <input type="radio" ng-model="queue.condition" value="unhooked" /> unhooked
        <input type="radio" ng-model="queue.condition" value="partial" /> partial
      </div>
    </div>
  </div>

</div>

If we want to include a name dynamically, look into an Angular name directive such as: Dynamic form name attribute <input type="text" name="{{ variable-name }}" /> in Angularjs