AngularJS radio buttons on ngRepeat

Bar baz

by Sajeetharan Sinnathurai

HTML

<form name="myForm" ng-controller="MyCtrl">
    <p>Favorite Beatle</p>
    <ol>
        <li ng-repeat="person in people" ng-init="$parent.name = people[0].name">
            <label>{{person.name}}
                <input type="radio" ng-model="$parent.name" name="name0" value="{{person.name}}"  required />{{$parent.name}}
            </label>
        </li>
    </ol>
       <ul>
        <li ng-repeat="person in peopledata" ng-init="$parent.selected = peopledata[0].jobs">
            <label>{{person.jobs}}
                <input type="radio" ng-model="$parent.selected" name="nameout" value="{{person.jobs}}"  required />{{$parent.selected}}
            </label>
        </li>
    </ul>
            <p/>
      <ul>
        <li ng-repeat="person in people">
        <label>{{person.name}}
                <input type="checkbox" ng-model="person.status" name="name" value="{{person.name}}" required />
            </label>
        </li>
    </ul>
        <span ng-repeat="person in people">
            <label>{{person.name}}
                <input type="radio" ng-model="$parent.name" name="name1" value="{{person.name}}"/>
            </label>
        </span>
            <span ng-repeat="person in people">
            <label>{{person.name}}
                <input type="checkbox" ng-model="person.status" name="name" value="{{person.name}}"/>
            </label>
        </span>
    <p><tt>myForm.$invalid: {{myForm.$invalid}}</tt></p>
    {{people}}<p/>
    <button ng-disabled="myForm.$invalid">Submit</button>
{{selected}}<p/>
</form>

JavaScript

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

    $scope.peopledata = [{
        name: "John",
        jobs: "tech support"
    }, {
        name: "Paul",
        jobs: "game developer"
    }, {
        name: "George",
        jobs: "software engineer"
    }, {
        name: "Ringo",
        jobs: "gardener"
    }];
}