Limit checkbox selections and bind to an array in AngularJS

I am trying to achieve two things:

1. Bind an array to a list of checkboxes (just a string array), and

2. Limit the number of selections the user can make to a number between 1 and the number of available items less 1.

I can get (2) to work until the user clicks the last item, at which point it loses track and the items remain selected.

The interactive code is up here: http://ift.tt/1yLbzQr (forked from a similar example)

My HTML/Angular code:

<p ng-repeat="item in allOptions" class="item" id="{{item}}">
      {{item}} <input type="checkbox" ng-change="sync(bool, item)" ng-model="bool" ng-checked="isChecked(item)"> Click this to sync this item with the target array.  {{item}} Selected: {{bool}}

and the JS:

var myApp = angular.module("myApp", []);

var maxItems = 1;

myApp.controller('myController', function($scope) {
  $scope.title = 'AngularJS Checkboxes Bound to Target Array with Limited Number of Selections';
  $scope.content = '';

  $scope.isChecked = function(item){
      var match = false;
      for(var i=0 ; i < $scope.data.length; i++) {
        if($scope.data[i] === item) {
          match = true;
        }
      }
      return match;
  };

  $scope.allOptions = [
    'one', 'two', 'three', 'four'
  ];

  $scope.data = [
  ];

  $scope.sync = function(bool, item){
    if (bool) {
      // add item
      $scope.data.push(item);
      // if we have gone over maxItems:
      if ($scope.data.length > maxItems) {
        //remove first item
        $scope.data.splice(0,1);
      }
    } else {
      // remove item
      for (var i=0 ; i < $scope.data.length; i++) {
        if ($scope.data[i] === item){
          $scope.data.splice(i,1);
        }
      }      
    }
  };

});