radio input and ng-repeat are not working

[vlamic]

If you have radio buttons in corporation with "ng-repeat", the radio buttons do not reflect result to "ng-model".

E.g.

  <table>
        <tr ng-repeat="option in options">
            <td>
                <input type="radio" ng-model="selectedOption" value="{{option.value}}"
                       id="option-{{option.value}}">
                <label for="option-{{option.value}}">{{option.description}}</label>
            </td>
        </tr>
    </table>

In the example above it is possible to select all radio buttons at the same time even if they have same "ng-model".
angular 1.0.1

[mernen]

That happens because ng-repeat creates a new scope. Basically, each <input> is creating a selectedOption value on its own inner scope. To work around that, create a new container object for that value. For example, you could declare in your controller:

$scope.data = {selectedOption: x};

And then in your template, use ng-model="data.selectedOption" (hopefully with a name more descriptive than "data" :)). Since data is never directly assigned on inner scopes, it's not overridden.

Albeit not particularly intuitive at first, I suspect this is intended behavior.

[vlamic]

Interesting.

That works! Thanks a lot! :)

[mhevery]

I am sorry it is stoopid (i think you meant stupid). Perhaps you could design a better framework. Go for it. :-)

[robschley]

Could someone explain why wrapping the property in another object fixes this problem? This indirectly helped me solve a weird issue I had with a directive and a controller trying to access the same data.

[davispw]

@robschley - if you "set" a single variable it will be confined to the current scope. If you "get" it will try to find the variable in the parent scopes, too. So when you check these checkboxes-

1. <input type="checkbox" ng-model="foo"> -- will set "foo" in the current scope
2. <input type="checkbox" ng-model="wrapper.foo"> -- will GET "wrapper" from the parent scope (by reference), then set "foo" on the wrapper

[cain-cs]

Please add this to the documentation. I spent too long searching and experimenting before finding this.

Thanks!

[0x-r4bbit]

Same here, this issue saved my day but I spent a lot time to find this.

[TLmaK0]

Same here, this issue saved my day but I spent a lot time to find this.

[tynman]

Rather than wrapping it in an object, you can also reference your parent's scope directly.

I've set up an example here: http://plnkr.co/edit/aqTUSBEvbJafX0r3luXy

[sekib]

This video helped me: http://egghead.io/video/angularjs-the-dot/

[maxigit]

Had the same problem and tried tynman solution
$parent.selectOption,
worked straight.
I'm posting it just to actually show the solution (better I think than a link ...)

[s10mcow]

worked for me! thanks alot!

"Rather than wrapping it in an object, you can also reference your parent's scope directly.

I've set up an example here: http://plnkr.co/edit/aqTUSBEvbJafX0r3luXy"

[micron]

Works! Thanks!

Thanks a lot.