JSFiddle - React, Tailwind, and code Playground

by santhosh lanka

HTML

<div ng-app="myApp" ng-controller="checkboxCtrl">Check All
    <ul >
   <li>
    <input type="checkbox" ng-model="checkall" ng-click="checkUncheckAll()" /> Check All
   </li>
   <li ng-repeat="user in users">
    <input type="checkbox" value="{{ user.name }}" ng-model="user.checked" ng-change='updateCheckall()' /> {{user.name}} 
   </li> 
  </ul>
</div>

JavaScript

angular.module("myApp", [])
    .controller("checkboxCtrl", function ($scope) {

   $scope.users = [
   { name: "Yogesh singh"}, 
   { name: "Sonarika Bhadoria" }, 
   { name: "Vishal Sahu" }, 
   { name: "Anil singh" }
  ];
  
  $scope.checkUncheckAll = function () {
   angular.forEach($scope.users, function (user) {
    user.checked = $scope.checkall;
   });
  };

  $scope.updateCheckall = function(){
           
    var userTotal = $scope.users.length;
    var count = 0;
    angular.forEach($scope.users, function (item) {
       if(item.checked){
         count++;
       }
    });
    
	$scope.checkall = (userTotal == count) ? true : false;

  };
});