Stop checkbox list from click

I had ng-repeat checkboxes on angularJS. I'm using library checkboxlist to implement multiple checkboxes with ng-repeat. I had a requirement that the users only can click the maximum number of checkboxes. I used $event.stopPropagation, and it works, but the ng-model is not updated because I have no idea how to access checkboxlist.

Controller

$scope.mealCBChanged = function($event, mc){
    if(mc.selectedCBId.length > 2){
        $event.preventDefault();
        alert("You can't select more than " + 2);
    }
}

HTML

<div ng-repeat="m in mc.meals">
  <input type="checkbox" name="" 
         id="" 
         checklist-model="mc.selectedCBId" 
         ng-init="mc.selectedCBId = []" 
         ng-click="mealCBChanged($event, mc)" 
         checklist-value="m.name"/>
  <label for=""><span class="checkbox primary primary"><span></span></span></label>
</div>

Problem

When I select the third checkbox, the alert invoked and the third checkbox doesn't click because $event.preventDefault() is working fine. But the mc.selectedCBId has 3 items in the array, it supposedly has two items.