复选框选中/取消选中不能正常使用 angularjs

Question

I am working on a project where I am using a partial view in ASP.NET MVC and in that partial view there is a html table and in the table header there is a checkbox on click of that checkbox all the checkboxes besides the table body data should be checked and if from table body data any checkbox is unchecked then top header checkbox should be also unchecked. This functionality is working with my current code but it is working only once second time if I uncheck top header checkbox and check it again and try to uncheck any table body data checkbox top header checkbox is not getting unchecked I am not able to figure out why this is not working

Here is my code

<table class="table table-condensed table-bordered table-hover left" style="width:100%;margin:0px;">
    <thead>
        <tr>
            <th>
                <input type="checkbox" style="margin: 3px 0;" ng-model="IsAllChecked" ng-change="CheckUncheckAll(IsAllChecked)" ng-checked="isChecked"/>
            </th>
            <th><label>Name</label></th>
            <th><label>City</label></th>
            <th><label>Country</label></th>
        </tr>
    </thead>

    <tr ng-repeat="clientData in $Clients.Clients| orderBy:'Name'|limitTo: totalDisplayed | filter: searchClient"
        ng-mouseover="MouseOverOnUnassigned(clientData );" ng-mouseleave="MouseLeaveOnUnassigned(clientData)">

        <td>
 
            <input type="checkbox" ng-model="clientData.IsSelectedClients" ng-change="CheckUncheckHeader(clientData.IsSelectedClients)" />
        </td>
        <td>{{clientData.Client}}</td>
        <td>{{clientData.City}}</td>
        <td>{{clientData.Country}}</td>       
    </tr>
</table>

And my angular js code

$scope.CheckUncheckHeader = function (checked) {
    $scope.isChecked = true;
    for (var i = 0; i < $scope.$Client.Clients.length; i++) {
        if (!$scope.$Client.Clients[i].IsSelectedClients) {
            $scope.isChecked = false;
            break;
        }
    };
};

$scope.CheckUncheckAll = function (IsAllChecked) {
    for (var i = 0; i < $scope.$Client.Clients.length; i++) {
        $scope.$Client.Clients[i].IsSelectedClients= IsAllChecked;
    }
};

Can anybody tell what is the best way to achieve this without failing. Thanks in advance

Answer 1

Please, try with below code. Good Luck

$scope.CheckUncheckAll = function (IsAllChecked) {
    for (var i = 0; i < $scope.$Client.Clients.length; i++) {
        if(IsAllChecked == true) 
        {
            $scope.$Client.Clients[i].IsSelectedClients= true;
            $scope.isChecked = true;
        } else 
        {
           $scope.$Client.Clients[i].IsSelectedClients= false;
           $scope.isChecked = false;
        }
    }
};