Unable to access check boxes using jquery in angular JS app

I have a table in angular JS page which populates the data received from the server using ng-repeat directive. This table is also paged so i have multiple pages in the table which work fine.

Problem here is that I have check boxes associated to each of the row in the table (as first column) and in the header I have a select All check box. Suppose all the check boxes in the below table (as table row) is checked and disabled.

What I want to achieve is, I want to disable the select All check box on page load when all the check boxes in the below table row is checked and disabled.

I am using below code to check if the length of check boxes which are checked is equal to total no of check boxes in that table, then i want to disable the select all check box:

if ($('.checkbox:checked').length == $('.checkbox').length) {
   self.disableSelectAll = true;
}

Problem I am facing is even if all the checkboxes are checked at page load, $('.checkbox:checked').length returns 0 and $('.checkbox').length also returns 0.

Kindly guide me how may I able to disable the select all checkbox based on above condition?