AngularJS : How to disable checkboxes after specified amount is selected?

angularjs, angularjs-directive, angularjs-ng-repeat, angularjs-scope

Solution

FIDDLE

$scope.checkChanged = function(item){
    if(item.winner) $scope.checked++;
    else $scope.checked--;
}

and

 <input type="checkbox" ng-model="item.winner" ng-change="checkChanged(item)" ng-disabled="checked==limit && !item.winner"/>

this keeps track of checked with ng-change and disables them if the limit is reached and the checkbox is not checked.

not using $watch because of the possibility of ~200 checkboxes.

edit: sorry forgot to click update on fiddle, it should work now. Also note that limit is set to 4 with `$scope.limit = 4`;

Problem

I have checkboxes within loop like below: ``` <li ng-repeat="item in items"> <h2> {{item.better}}</h2> <span>{{item.startTime}}</span> <b> {{item.lengthTime}}</b> <input type="checkbox" checklist-model="item.winner" checklist-value="item"> </li> ``` I want to set limit so that users could only select maximum 50 checkboxes and not more than that out of (no. of total items in the list i.e 100 or 200 etc.). How do we accomplish that using angular js ? Help would be really appreciated. Thank you.

Original source