JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="ChckbxsCtrl">
  <table>
    <li ng-repeat="item in itemDisplayed" class="ng-scope has-pretty-child">
      <div>
        <ul>
          <input type="checkbox" class="checkall" ng-model="item.name_selected" ng-click="toggleAll(item)"><span>{{item.name}}</span>
          <div>
            <li ng-repeat="sub in item.subs" class="ng-scope has-pretty-child">
              <input type="checkbox" kv-pretty-check="" ng-model="sub.selected" ng-change="optionToggled(item,item.subs)"><span>{{sub.sub}}</span>
            </li>
          </div>
        </ul>
      </div>
    </li>
  </table>
</div>

JavaScript

function ChckbxsCtrl($scope) {
  $scope.chkbxs = [{
    label: "Led Zeppelin",
    val: false
  }, {
    label: "Electric Light Orchestra",
    val: false
  }, {
    label: "Mark Almond",
    val: false
  }];
  var newArr = [];
  var list1 = {
    name: "Role A",
    name_selected: false,
    subs: [{
      sub: "Read",
      id: 1,
      selected: false
    }, {
      sub: "Write",
      id: 2,
      selected: false
    }, {
      sub: "Update",
      id: 3,
      selected: false
    }],
  };
  var list2 = {
    name: "Role B",
    name_selected: false,
    subs: [{
      sub: "Read",
      id: 1,
      selected: false
    }, {
      sub: "Write",
      id: 2,
      selected: false
    }],
  };
  var list3 = {
    name: "Role B",
    name_selected: false,
    subs: [{
      sub: "Read",
      id: 1,
      selected: false
    }, {
      sub: "Update",
      id: 3,
      selected: false
    }],
  };
  newArr.push(list1);
  newArr.push(list2);
  newArr.push(list3);

  $scope.itemDisplayed = newArr;


  $scope.toggleAll = function(item) {
    var toogleStatus = !item.name_selected;
    console.log(toogleStatus);
    angular.forEach(item, function() {
      angular.forEach(item.subs, function(sub) {
        sub.selected = toogleStatus;
      });
    });
  };

  $scope.optionToggled = function(item, subs) {
    item.name_selected = subs.every(function(itm) {
      return itm.selected;
    })
  }

}