angular-datatables - ng-repeat does not update datatable with new rows when $onChanges event called in component controller

Question

I have made an angular-datatable component to be used in my project (using angular 1.5) and have bound the data it is populated with (the angular way) to an array of objects that gets updated in the parent scope. Upon changing the parent scope value, the $onChanges event is called and the bound data is updated, but the rows in the table do not change via ng-repeat to reflect the update -- after the table is initially drawn, no changes can be seen with subsequent data changes. Here is my code:

JS:

angular.module('datatable').
component('datatable', {
  bindings: {
    graphData: '<',
    tableId: '=',
    divId: '='
  },
  templateUrl: 'components/graphs/datatable.template.html',
  controller: function datatableController (DTOptionsBuilder, DTColumnBuilder) {
        let self = this;
        self.tableKeys = Object.keys(self.graphData[0])

        self.$onChanges = function () {

            self.dtOptions = {
                paginationType: 'full_numbers',
                displayLength: 30,
                dom: 'Bfrtip',
                buttons: [
                    {extend: 'excelHtml5'},
                    'copy'
                ],
                scrollY: 450,
                scrollX: '100%',
                scrollCollapse: true,
            };
        };
    }
})

HTML (Component):

<datatable graph-data="$ctrl.submittedResults" table-id="'allDataTableResults'" div-id="'allDataTable'"></datatable>

HTML (Template):

<div class="col-md-10 col-md-offset-1">
    <div class="well well-lg" style="background: white">
        <div id="{{$ctrl.divId}}" style="width: 100%; height: 700px; display: block; margin: 0 auto">
            <table datatable="ng" dt-options="$ctrl.dtOptions"
            class="table table-striped table-bordered" cellspacing="0">
                <thead>
                    <tr>
                        <th ng-repeat="key in $ctrl.tableKeys">{{key}}</th>
                   </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="row in $ctrl.graphData">
                        <td ng-repeat="val in row">{{val}}</td>
                    </tr>
                </tbody>
        </table>
    </div>
</div>

I have tried just about everything I have seen in related questions on Stack Overflow to no avail, and I had no luck with rerendering the table completely with dtInstance. Any help would be greatly appreciated.

Answer 1

v0.5.5 doesn't allow '$' char in controller variable name which unfortunately is the default value in Angular Component. Override it as a workaround e.g. controllerAs: ctrl

https://github.com/l-lin/angular-datatables/blob/v0.5.5/dist/angular-datatables.js#L892

Reported this issue: https://github.com/l-lin/angular-datatables/issues/916