checkbox binding not working in dynamic created column

In my angular app, I'm creating table dynamically from javascript.

$("#tableName").html("<table id='dtData' name='dtData' dt-options='dtOptions' dt-columns='dtColumns' class='table table-striped table-bordered'></table>");

here is how I'm generating columns

var header = data[0], dtColumns = [];

          //create columns based on first row in dataset
          for (var key in header) 
          {
             // console.log(key);
              if(key == "sendEmail")
              {
                  dtColumns.push(DTColumnBuilder.newColumn(key).withTitle("Send Email").renderWith(actionsHtml));

              }
              else
              {
                dtColumns.push(DTColumnBuilder.newColumn(key).withTitle(key));
              }
          }

this is actionsHtml function

    function actionsHtml(data, type, full, meta) {

    return '<input type="checkbox" name="sendEmail" value="' + data+'">';
}

And here I'm finalizing this table

 $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);

It creates table and then a column of checkbox type but it doesn't bind value to checkbox. Here is table

and console value of column

But the problem is.. chechbox column binding is not working.. either I check/uncheck it from html or in javascript, it does not make any change in table/ original list.

Any kind of help will be appreciated.