<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Multiple Checkboxes</title>
  <style>
    label {display: block;}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
</head>

<body>
  <div ng:controller="MainCtrl">
    <label ng-repeat="color in colors">
        <input type="checkbox" ng-model="colorValues[color]"> {{color}} 
    </label>
    <p>colorValues: {{colorValues}}</p>
    
    <hr />
    
    <label ng-repeat="user in users">
        <input type="checkbox" ng-model="userValues[user.id]" value="{{user.id}}"> {{user.name}} 
    </label>
    <p>userValues: {{userValues}}</p>
  </div>
    
  <script>
    var app = angular.module('plunker', []);
    
    app.controller('MainCtrl', function($scope)
    {
        $scope.colorValues = {Blue: true, Orange: true};
        $scope.colors = ['Red', 'Blue', 'Green', 'Orange', 'Yellow'];
        
        $scope.userValues = {2: true, 3: true};
        $scope.users = [{id: 1, name: 'Bill'}, {id: 2, name: 'Jean'}, {id: 3, name: 'Barb'}, {id: 4, name: 'Ron'}];
        
        /*
          what I'd like to see, both to preset the checkboxes initially and when reading them as they change:
          $scope.userValues = [2,3]
        */
        
        $scope.checkboxUtils =
        {
          set: function(name, values)
          {
            
          },
          get: function(name)
          {
            var cbs = document.getElementsByName(name), 
              count = cbs.length,
              values = [],
              i;
            for (i = 0; i < count; i++)
            {
              if (cbs[i].checked)
                values.push(cbs[i].value);
            }
            return values;
          }
        }
    });
  </script>
</body>
</html>