无法刷新Angularjs中的ng-repeat

Question

I am trying to use a function to check all checkboxes in a tree of checkboxes. It is successfully checking and unchecking, BUT if I select a single checkbox then press check all, and uncheck, the single checkbox stays as it is as freeze

HTML

<fieldset id="field3">
  <table>
    <tr ng-repeat="e in empdepts | groupBy:'dep_LDesc'">
      <td>
        <label ng-click="showContent = !showContent"></label>
        <details ng-open="showContent">
          <summary>
            <input type="checkbox" ng-model="chk" /> {{e[0].dep_LDesc}}</summary>
          <div ng-repeat="employee in e">
            <input type="checkbox" ng-checked="chk"> {{employee.Sname}}
          </div>
        </details>
      </td>
    </tr>
  </table>
  <hr />
  <table>
    <tr>
      <td>
        <input type="checkbox" ng-model="all" ng-click="selectall(all)" /> All Departments</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" ng-model="self" /> Self Services </td>
    </tr>
  </table>
</fieldset>

Controller

$scope.selectall = function (all) {
    if (all) {
        $scope.chk = true;
    }
    else
    {
        $scope.chk = false;
    }
}

LoadEmpDepts();

function LoadEmpDepts() {
    Assignments.getempdepts().then(function (response) {
        $scope.empdepts = (response.data);
        console.log($scope.empdepts);
    })
}

Answer 1

You need to have the checked property for individual elements, so the option would be to have a checked property inside each element of the array.

so whenever checkbox is checked update the property. and when checking all you make all elements checked property to be true.

  <label for="{{all.type}}"  ng-if="x.type === 'ALL'" >{{x.type}}</label>

example,

DEMO