JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.0.0rc5/angular-1.0.0rc5.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore.js"></script>
<div ng-app="test">
   
    <div ng-controller="MainCtrl">
    <div ng-repeat="person in persons">
    <h3>{{person.name}}</h3><br><br>
    <div ng-repeat="category in categories">
        <span class="section-label">{{category.name}}</span>
        <table class="table-stripped">
            <tr ng-repeat="product in categoryProducts(category)">
                <td>{{product.name}}</td>
                <td><input type="checkbox"
                           ng-model="personLikesProduct(person, product)"
                           ng-click="toggleProduct(person, product)"</td>
            </tr>
        </table>
        <br>
</div>
    <hr>
    <div>
    <div class="floated">
    Debug<br>                
    {{persons}}<br>
    </div>
    </div>
</div>

CSS

body {font-family: sans-serif; font-size: small;}
table td { padding: 5px; }
.section-label { color: grey}
.floated {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 50%;
    background-color: #eef;
    font-size: x-small;
}

JavaScript

var app = angular.module('test', []);


function MainCtrl($scope) {

    $scope.persons = [
        {
        "id": 0,
        "name": "John",
        "productIds": [0]},
    {
        "id": 1,
        "name": "Martha",
        "productIds": [0, 3]},
    {
        "id": 2,
        "name": "Jeremy",
        "productIds": [1, 2]}
    ];


    $scope.products = [
        {
        "id": 0,
        "name": "Oreo",
        "categoryId": 0},
    {
        "id": 1,
        "name": "Chips Ahoy",
        "categoryId": 0},
    {
        "id": 2,
        "name": "Filipinos",
        "categoryId": 0},
    {
        "id": 3,
        "name": "Milka",
        "categoryId": 1}
    ];

    $scope.categories = [
        {
        "id": 0,
        "name": "Cookies"},
    {
        "id": 1,
        "name": "Chocolates"}
    ];

    
    $scope.categoryProducts = function(category) {
        var products = [];
        for (i in $scope.products) {
            if ($scope.products[i].categoryId == category.id) products.push($scope.products[i]);
        }
        return products;
    };
    
    
    $scope.personLikesProduct = function(person, product) {
        return _.include(person.productIds, product.id);
    };

    
    $scope.toggleProduct = function(person, product) {
        if (_.include(person.productIds, product.id)) {
            var index = person.productIds.indexOf(product.id);
    person.productIds.splice(index, index);
        } else {
            person.productIds.push(product.id);
        }
    };
}