ng-table inside a custom directive error "Cannot set property '$data' of null"

here my question:

I am trying to build a directive in angular, which would use an ng-table inside. The problem is that input parameter tableData is initialized as an empty array initially because it is set from the outside of the directive when the user clicks on a button.

So i added a watch on the tableData and tried to reload the table when the tableData changes.

But the differ.resolve functions ends up with the following exception.

Please help

directive usage

<table-multiselect table-data="objectArray"></table-multiselect>

This is my temp


<table ng-table="multiselect" class="table">
     <tr ng-repeat="feature in $data">
            <td data-title="'Id'" sortable="'id'">{{feature .id}}</td>
            <td data-title="'Name'" sortable="'name'">{{feature .name}}</td>
            <td data-title="'Type'" sortable="'type'">{{feature .type}}</td>


.directive('TableMultiselect', function (ngTableParams) {
    return {
        restrict: 'E',
        templateUrl: 'TableMultiselect.tmpl.cshtml',
        scope: {
            tableData: '='
        controller: function ($scope) {

            var buildMultiSelectTable = function () {
                return new ngTableParams({
                    page: 1,
                    count: 10,
                    sorting: {
                        id: 'asc'
                    filter: {},

                }, {
                    counts: [10],
                    total: $scope.tableData.length, // length of data
                    getData: function ($defer, params) {
                        var data = $scope.tableData;
                        if (data.length <= 10) {
                            params.settings({ 'counts': [] });

            $scope.multiselect = buildMultiSelectTable();

            $scope.$watch('tableData', function (newValue, oldValue) {
                if ($scope.tableData != undefined && $scope.tableData.length > 0) {



TypeError: Cannot set property '$data' of null
    at angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:3095
    at l.promise.then.J (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:101)
    at angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:102
    at h.a.$get.h.$eval (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:113)
    at h.a.$get.h.$digest (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:110)
    at h.a.$get.h.$apply (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:113)
    at m (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:72)
    at w (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:77)
    at XMLHttpRequest.B.onreadystatechange (angular?v=M5FbIdPbFPNnbg6slbXZa4DR7EKc6tL5nLLGAVGYAa41:79)


One problem that is obvious from the code you have pasted is the directive name should be 'tableMultiSelect' not 'TableMultiSelect'

app.directive('tableMultiselect', function (ngTableParams) {

There might be other problems which are tough to guess with out looking at the complete code, so here's the working implementation based on what i understood from your question :

And this is how your object array changes at runtime.

    $scope.objectArray = [];

        id: 1,
        name : "Abc",
        type : "type1"



 ? Angular2 decorator for 2 way property binding
 ? AngularJS: Nested Directives - Data binding ishu
 ? AngularJS: Binding a service value to a directive
 ? How avoid to show {{ ... }} at the start?
 ? Update data after display
 ? Angularjs: why there are 3 watchers for 1 binding?
 ? Angularjs: why there are 3 watchers for 1 binding?
 ? Angularjs: why there are 3 watchers for 1 binding?
 ? How to count total number of watches on a page?
 ? What is considered a watcher in Angular?