AngularJS: Checkbox Count

http://angularjs.org/

by ernestohs

HTML

<script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
<div ng-controller="MyCtrl">

    <div ng-repeat="item in items">
        <input id="{{ item.id }}"
               type="checkbox"
               ng-model="item.selected"
               ng-disabled="item.disabled"
               ng-checked="item.selected" />
    <label for="{{ item.id }}" >{{ item.title }}</label>
</div>
</div>

JavaScript

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', ['$scope', function($scope) {    
    $scope.items = [{
        id: 1,
        title: 'item1',
        selected: true
    },{
        id: 2,
        title: 'item2',
        selected: false
    },{
        id: 3,
        title: 'item3',
        selected: false
    },{
        id: 4,
        title: 'item4',
        selected: false
    },{
        id: 5,
        title: 'item5',
        selected: false
    },{
        id: 6,
        title: 'item6',
        selected: false
    },{
        id: 7,
        title: 'item7',
        selected: false
    },{
        id: 8,
        title: 'item8',
        selected: false
    },{
        id: 9,
        title: 'item9',
        selected: false
    },{
        id: 10,
        title: 'item10',
        selected: false
    }
    ];
    
    $scope.$watch(function () {
        return $scope.items;
    },
    function (newValue, oldValue) {
        if(newValue !== undefined && oldValue !== undefined){
      var selected =  newValue.filter(function(_item){
                 return _item.selected == true;
          });
          
          if(selected.length > 4){
           //disable other checkboxes
            angular.forEach($scope.items, function(item, key) {
               if(item.selected === false){
               item.disabled = true;
               }
            });
          }
          else{ // enable all
             angular.forEach($scope.items, function(item, key) {
               item.disabled = false;
            });
          }
        }
        
    }, true);
              
}]);