How to bind a checkbox in jquery datatable row using angular

Question

I have below functions in same angular controller.

$scope.init() is used to configure a Jquery datatable.

In first column I have checkbox and I need to call toggleSelection() on checkbox change/toggle and pass an object id.

However, I am not able to do so.

$scope.init = function {
 var testTable = $('#testTable').dataTable($.extend({
    aaSorting:[[5, 'desc']],
    fnRowCallback: function (nRow, object, iDisplayIndex){
          //some code to format rows
    },
    aoColumns: [{
                mData: "id", sTitle: "", bSortable: false,
                mRender:function(data, type, question){
                return '<input type="checkbox" ng-click="toggleSelection(' + object.id + ')"/>';
    }},
    //....Other columns
    ],
    fnServerData: TestApiHandler
    }, defaultTableSettings))

    //TestApiHandler: Already configured for Ajax call
    //defaultTableSettings: dafault setting for datatable
}

$scope.toggleSelection = function(id) {
    console.log('Object Id' + id)
}

Below is HTML for datatable.

<table id="testTable" class="table table-bordered table-condensed table-striped table-hover "></table>

Answer 1

Use more angular way:

In your html:

<table...> <input ng-repeat="chbx in checkboxes" type="checkbox" ng-click="toggleSelection({{chbx .id}})"/> ... </table>

And in controller:

$scope.checkboxes = [{id: 42}, ...];

Answer 2

You can use ngModel with checkboxes.

<input ng-model="checkboxes[object.id]" ng-click=... />

In your controller:

$scope.checkboxes = [];