<!DOCTYPE html>
<html ng-app="app">
  <body ng-controller="ParticipantsCtrl as Participants">
    <h1>Participants checked</h1>

    <div ng-repeat="participant in Participants.list">
      <label>
        <input type="checkbox" ng-value="participant" check-list="Participants.checked">
        {{participant.name}}
      </label>
    </div>

    <br>

    Participants.list = <pre>{{Participants.list | json}}</pre>

    Participants.checked = <pre>{{Participants.checked | json}}</pre>


    <script src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <!--<script src="https://code.angularjs.org/1.4.4/angular.js"></script>-->
    <!--<script src="https://code.angularjs.org/1.4.7/angular.js"></script>-->
    <!--<script src="https://code.angularjs.org/snapshot/angular.js"></script>-->

    <script>
      var app = angular.module('app', []);

      function Participants() {
        var self = this;

        self.list = [
          { name: 'Adam' },
          { name: 'Amalie' },
          { name: 'Wladimir' },
          { name: 'Elodie' }
        ];

        self.checked = [
          self.list[0],
          self.list[1]
        ];
      }
      app.controller('ParticipantsCtrl', Participants);

      // See How can AngularJS bind to list of checkbox values? http://stackoverflow.com/questions/14514461
      app.directive('checkList', function() {
        return {
          restrict: 'A',
          scope: {
            list: '=checkList',
            value: '@'
          },

          link: function(scope, element, attrs) {
            var handler = function(setup) {
              // DEBUG
              console.log('scope.value (from ng-value):', scope.value);

              var checked = element.prop('checked');
              var index = scope.list.indexOf(scope.value);

              if (checked && index == -1) {
                if (setup) element.prop('checked', false);
                else scope.list.push(scope.value);
              } else if (!checked && index != -1) {
                if (setup) element.prop('checked', true);
                else scope.list.splice(index, 1);
              }
            };

            var changeHandler = handler.bind(null, false);
            element.on('change', function() { return scope.$apply(changeHandler); });
            var setupHandler = handler.bind(null, true);
            scope.$watch('list', setupHandler, true);
          }
        };
      });
    </script>
  </body>

</html>