document.getElementById returns null for invisible rows in angularjs datatable

Question

In my Angularjs App, I'm creating dynamic table that also have a checkbox column and header of that column is also a checkbox for selectAll purpose.

Here is code of table creation

        var dt = this;
        // register function to call from dynamic html
        dt.selectAll_Clicked = selectAll_Clicked;

        var titleHtml = '';

        titleHtml = '<input id="chkboxSelectAll" onClick="selectAll_Clicked()" type="checkbox">';

        $('#dtData').DataTable().clear().destroy();
        $("#invDiv").empty();
        $("#invDiv").html("<table id='dtData' name='dtData' dt-options='dtOptions' dt-columns='dtColumns' class='table table-striped table-bordered'></table>");
        var header = data[0],
            dtColumns = [];

        //create columns based on first row in dataset
        for (var key in header) {

            dtColumns.push(DTColumnBuilder.newColumn(key).withTitle(key));

        }

        dtColumns.push(DTColumnBuilder.newColumn(null).withTitle(titleHtml)
            .renderWith(function(data, type, full, meta) {

                return '<input type="checkbox" id="chkboxSelect' + data.Id + '" name="SelectClient" >';


            }));

        $scope.dtColumns = dtColumns;

        //create options
        $scope.dtOptions = DTOptionsBuilder.newOptions()
            .withOption('data', data)
            .withOption('dataSrc', '');

        //initialize the dataTable
        angular.element('#dtData').attr('datatable', '');
        $compile(angular.element('#dtData'))($scope);

In selectAll_Clicked function, I'm getting Id(s) of all checkboxes and manually updating its checked property to true/false.

function selectAll_Clicked() {
    if ($scope.lstSelectedData != null && $scope.lstSelectedData.length === $scope.lstData.length) {
            $scope.lstSelectedData = [];
            for (obj in $scope.lstData) {
                document.getElementById("chkboxSelect" + $scope.lstData[obj].Id).checked = false;

            }

        } else {
            $scope.lstSelectedData = [];
            for (obj in $scope.lstData) {
                console.log(document.getElementById("chkboxSelect" + $scope.lstData[obj].Id));
                if (document.getElementById("chkboxSelect" + $scope.lstData[obj].Id).disabled == false) {
                    document.getElementById("chkboxSelect" + $scope.lstData[obj].Id).checked = true;
                    $scope.lstSelectedData.push($scope.lstData[obj].Id);
                }
            }


        }
}

Its working fine with visible rows, but for invisible rows I'm facing issue

Uncaught TypeError: Cannot read property 'disabled' of null

document.getElementById returns null for invisible rows.

I tried this alternative solution. It returns definition of cell but it does not allow to update properties of that cell.

Is there any other way to do this?? Any kind of help will be appreciated.