Broken ngModel on Radio buttons with an ngRepeat

angular-ngmodel, angularjs, angularjs-ng-repeat, javascript

Solution

You need to add `ngModel` for each button. Then, since each iteration of `ngRepeat` creates a new isolate scope, you have two ways to reference your variable in the parent controller:

change `selectedItem` to an object. this works because objects are passed by reference in JS, while passing a primitive like you have doesn't work with two-way binding.

add `$parent.selectedItem`, which references the scope variable `selectedItem` in the controller.

In any case, you need `ngModel` for each button.

First option:

<input type='radio' 
       name='select' 
       id='{{$index}}' 
       ng-value='$index' 
       ng-model='$parent.selectedItem'/>

Plunker Using `$parent`

Second option:

JS:

$scope.selectedItem = {id: -1};

HTML:

<input type='radio' 
       name='select' 
       id='{{$index}}' 
       ng-value='$index' 
       ng-model='selectedItem.id'/>

(as well as change anywhere else you reference `selectedItem` to `selectedItem.id`)

Plunker Using an object for `selectedItem`

Problem

Plunk: http://plnkr.co/edit/Y4ntAj2fIIpexKjkCvlD?p=preview I'm trying to build a form component which allows the user to create multiple instances of a certain data field, but populate them from the same set of inputs. I'm creating a radio button for each of the items within the set, using `ng-repeat` then each radio button has its value set to the `$index` from the repeat. The radio buttons are modelled on `$scope.selectedItem`, which is used to point the inputs to the right item. For some reason, however, `selectedItem` never changes, even though the selected state of the radio buttons do. I tried a similar thing with static radio buttons and it worked fine, which leads me to believe that there is a problem with `ng-model` within `ng-repeat`.

Original source