JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="yourTest">

<div ng-controller="testList">
	<ul>
		<li ng-repeat="employee in items">
            <label>{{employee.name}}<br>{{employee.snippet}}
                <input type="checkbox" value="{{employee.name}}" ng-checked="check(employee.name) > -1" ng-click="toggleSelection(employee.name, 'items', employee.snippet)" />
            </label>
        </li>
        <li>Check All
            <input type="checkbox" ng-model="selectedAllItems" ng-click="checkAllItems()" />
        </li>
	</ul>
	<ul>
		<li ng-repeat="employee in books">
            <label>{{employee.name}}
                <input type="checkbox" value="{{employee.name}}" ng-checked="selection.indexOf(employee.name) > -1" ng-click="toggleSelection(employee.name, 'books')" />
            </label>
        </li>
	</ul>
    <ul>
		<li ng-repeat="employee in users">
            <label>{{employee.name}}
                <input type="checkbox" value="{{employee.name}}" ng-checked="selection.indexOf(employee.name) > -1" ng-click="toggleSelection(employee.name, 'users')" />
            </label>
        </li>

	</ul>
	<hr>
	<ul >
        <li type="checkbox" ng-repeat="sec in selection" ng-click="remove(sec.name)">{{sec.employeeName}}{{sec.employeeSnippet}}</li>
 All: {{selection.length}}
	</ul>
</div>
     
</body>

JavaScript

var yourTest = angular.module('yourTest', []);

yourTest.controller('testList', function ($scope) {
  $scope.items=[
    {'name': 'Js', 'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Css','snippet': 'The Next, Next Generation tablet.'},
    {'name': 'Html', 'snippet': 'The Next, Next Generation tablet.'}
  ];

  $scope.books=[
    {'name': 'Book1', 'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Book2','snippet': 'The Next, Next Generation tablet.'},
    {'name': 'Book3', 'snippet': 'The Next, Next Generation tablet.'}
  ];
    
  $scope.users=[
    {'name': 'User1', 'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'User2','snippet': 'The Next, Next Generation tablet.'},
    {'name': 'User3', 'snippet': 'The Next, Next Generation tablet.'}
  ];
    
    $scope.check = function(employeeName){
      var idx = -1;
      angular.forEach($scope.selection, function (sec) {
          if(sec['employeeName'] == employeeName) idx = $scope.selection.indexOf(sec);
      });
      return idx;
    }

  $scope.selection=[];
  // toggle selection for a given employee by name
  $scope.toggleSelection = function toggleSelection(employeeName, cat, employeeSnippet) {
      var idx = -1;
      angular.forEach($scope.selection, function (sec) {
          if(sec['employeeName'] == employeeName) idx = $scope.selection.indexOf(sec);
      });

     // is currently selected
     if (idx > -1) {
       $scope.selection.splice(idx, 1);
     }

     // is newly selected
     else {
         $scope.selection.push({
             employeeName: employeeName,
             employeeSnippet: employeeSnippet,
             cat: cat
         });
     }
             var i = 0;
        angular.forEach($scope.selection, function (sec) {
            if(sec['cat'] == 'items') i++;
        });
        if (i == $scope.items.length) $scope.selectedAllItems = true;
        console.log(i);
   };
    $scope.checkAllItems = function () {
        if...