AngularJS dirPagination Select All Visible Rows

I'm building a CRUD data management project using Angular and the dirPagination directive and need to have a "select all" checkbox that selects all rows that are visible /without/ using jQuery.

I started with this - note - I am climbing the Angular learning curve and am aware that some/all of this may not be "the Angular way" but I also don't want to start fiddling (no pun) with the guts of dirPagination, ergo the dirPagination directive:

 <tr dir-paginate-start="item in items|filter:filterFunction()|orderBy:sortPredicate:reverse| itemsPerPage: rowsPerPage">

and the individual row-checkbox

<input type="checkbox" class="rowSelector" ng-model="item.isSelected"  ng-change="rowSelect($index, $event)"/> status: {{item.isSelected}}

and the related model elements:

$scope.items = [] //subsequently filled
$scope.rowsPerPage = 5;
$scope.rowSelect = function (ix, $event) {
           var checked = (typeof $event == 'undefined') ? false : true;
           if (!checked) { $scope.masterCheck = false; }
           var rpp = $scope.rowsPerPage;
           var p = $scope.__default__currentPage;  //dirPagination's current page
           var start = ((Math.max(0, p - 1) * rpp));
           $scope.items[start + ix].isSelected = checked;
       };

that works as expected. Check/uncheck a row and the {{item.isSelected}} value is updated in the model and is displayed beside the checkbox.

Then I added this /outside/ of the dirPagination repeat block:

<input type="checkbox" id="masterCheckbox" ng-model="masterCheck" ng-click="checkAll()" />

and the related function in the model:

 $scope.checkAll = function () {
           var rpp = $scope.rowsPerPage;
           var p = $scope.__default__currentPage;          //dirPagination's current page
           var start = ((Math.max(0, p - 1) * rpp));
           var checked = $scope.masterCheck == true;
           var rows = document.getElementsByClassName("rowSelector");
           for (var ix = 0; ix < rows.length; ix++) {
               rows[ix].checked = checked;
               $scope.items[start + ix].isSelected = checked;
           }
       }

however in the checkAll() function checking/unchecking the individual rows isn't reflected in the {{item.isSelected}} display of each row.

Explicitly setting the individual item with

$scope.items[start + ix].isSelected = checked;

seems to set the 'isSelected' property of that item within the scope of the checkAll function but the row display does not change.

Clearly I have something wrong perhaps misunderstanding a Scope issue but at this point I'm stumped.

Any help greatly appreciated :-)