JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<div ng-app ng-controller=MainCtrl>
    <div ng-repeat="group in groups">
        <button ng-click="selectIds(group.ids)">Select Group {{group.name}}</button>
        <button ng-click="deselectIds(group.ids)">Deselect Group {{group.name}}</button>
    </div>
    <div ng-repeat="person in people">
        <label><input ng-model="person.model" type="checkbox" />Person {{person.name}}</label>
    </div>
</div>

JavaScript

window.MainCtrl = function ($scope) {
    $scope.a = 10;
    $scope.people = [
        {name: "A"},
        {name: "B"},
        {name: "C"},
        {name: "D"},
        {name: "E"},
        ];
    $scope.groups = [{
        name: "New",
        ids: [0, 1]
    }, {
        name: "Old",
        ids: [2]
    }, {
        name: "Rest",
        ids: [3, 4]
    }

    ];
    
    $scope.selectIds = function(ids) {
        ids.forEach(function(id) {
            $scope.people[id].model = true
        });
    }
    
    $scope.deselectIds = function(ids) {
        ids.forEach(function(id) {
            $scope.people[id].model = false
        });
    }
}