AngularJS ng-repeat with multiple radio inputs

Question

I've got small problem with ng-repeat on persons with multiple radio inputs (yes/no). Input names should be different because of name="person.name" but it behaves like they all are the same. Somebody knows how to fix this?

http://jsfiddle.net/Chotkos/EbU8g/

HTML:

<form name="myForm" ng-controller="MyCtrl">
    <p>Decisions</p>
    <ul>
        <li ng-repeat="person in people">
            <label>{{person.name}}
                <input type="radio" ng-model="person.decision" name="person.name" value="Yes" />
                <input type="radio" ng-model="person.decision" name="person.name" value="No" />
            </label>
        </li>
    </ul>
</form>

JS:

function MyCtrl($scope) {
    $scope.people = [{
        name: "John"
    }, {
        name: "Paul"
    }, {
        name: "George"
    }, {
        name: "Ringo"
    }];
}

Answer 1

You need to use {{ person.name }} , rather than "person.name" in that context.

Answer 2

I don't know why you got downvoted. Your question was fine. So you are using the name property which is traditional in an HTML form. Since name isn't part of angular, you need to wrap the person.name in curly brackets name="{{person.name}}" so angular knows to parse it.

Answer 3

Please see here: http://jsfiddle.net/Chotkos/EbU8g/ that happend because you wrapped all inputs into label tag

  <form name="myForm" ng-controller="MyCtrl">
        <p>Decisions</p>
        <ul>
            <li ng-repeat="person in people">
                <label>{{person.name}}</label>
                <input type="radio" ng-model="person.decision" name="person.name" value="Yes" />
                <input type="radio" ng-model="person.decision" name="person.name" value="No" />
            </li>
        </ul>
    </form>