modelData.selected is not defined as an array in your controller, i.e. modelData.selected = [], two-way data binding will fail.

[radoszabelian]

I created a new directive containing an md-data-table. When trying to enable the row selection and bind an array to it, an error occurs, and the selection array will always be empty. Currently, the directive's controller is basically empty. The modelData is a directive argument, and the table shows up fine, but the selection array's always empty.

md-row-select="modelData.selected" : modelData.selected is not defined as an array in your controller, i.e. modelData.selected = [], two-way data binding will fail.

Content of the directive's html:

<md-data-table-container ng-if="modelData.items">
        <table  md-data-table class="md-primary" md-row-select="modelData.selected">
            <thead>
                <tr>
                    <th name="title"></th>
                    <th name="subtitle"></th>
                </tr>
            </thead>
            <tbody>
                <tr md-auto-select ng-repeat="entity in modelData.items | filter: filterQuery">
                    <td>{{entity.title}}</td>
                    <td>{{entity.subTitle}}</td>
                </tr>
            </tbody>
        </table>
    </md-data-table-container>

I've tried to declare an empty array inside the directive's controller, but that didn't work. I also tried to put an empty array inside the controller which owns the scope, where the directive is invoked but that didnt work either.

What am i doing wrong ? Please help.

[tunght]

I have the same problem

[yshaul]

Same here

[JoshBargar]

Same here

[nmindz]

Odd enough, what I found is that the data will be bound in the controller if you click the <th> checkbox, therefore selecting all rows, it will then update the model.

Selecting individual rows won't update the modalData.selected variable to the controller even though it correctly updates in the view (for instance {{ modalData.selected }} anywhere in the view would render the array correctly, whereas in the controller it wouldn't.).

Taking the example pen as a base for tests, add the following code:

$scope.$watch('selected', function() {
    console.log($scope.selected);
});

And add the following to the markup (just anywhere you'd like):

{{ selected }}

You'd notice that when individual rows are selected, the view updates correctly but nothing gets written to the JS console. When you select all rows at once through the <th> checkbox, however, both view and $watch are triggered, outputting correctly to the view and the console.

@daniel-nagy Is this unexpected behavior or am I missing something? (a promise, or whatsoever?)

[mcblum]

Same issue here, but strangely enough only in production. In my local MAMP environment it works just fine.

[mcblum]

Did anyone ever figure this out? We have an app in production where we've hacked something together for the moment but this is a really weird bug and one that we can't seem to diagnose.

[JoshBargar]

@mcblum I was getting this error because of some dependencies in bower that would not update correctly due to the dependencies included in this package.

Here is a portion of my bower.json

"dependencies": {
    "angular": "*",
    "angular-animate": "*",
    "angular-aria": "*",
    "angular-material": "*",
    "angular-route": "*",
    "angular-ui-router": "*",
    "components-font-awesome": "*",
    "angular-material-icons": "*",
    "angular-messages": "*",
    "angular-material-data-table": "~0.8.14"
  },
  "resolutions": {
    "angular": "1.4.7"
  }

I would then have to run

bower install --force-latest

The data table then worked for me.

[JoshBargar]

Also, I used this instead of $scope. Not sure how much of a difference that made.

[mcblum]

Hm. I just did that on the server and nothing. Already using controllerAs so I'm with you there. The strange thing is, it works in my dev environment but not in production. Thanks for helping with this @JoshBargar

[JoshBargar]

@mcblum What are your your dev dependencies?

[mcblum]

Here's the bower.json

"dependencies": {
    "bootstrap": "~3.3.5",
    "angular": "~1.4.7",
    "angular-ui-router": "ui-router#~0.2.15",
    "angular-sanitize": "~1.4.3",
    "trumbowyg-ng": "~0.0.3",
    "angular-material": "*",
    "growl": "~1.3.1",
    "angular-material-data-table": "~0.8.14",
    "angular-ui-sortable": "~0.13.4",
    "ng-file-upload": "~9.1.1",
    "aws-sdk": "aws-sdk-js#~2.2.10",
    "ng-lodash": "~0.3.0",
    "ngstorage": "~0.3.9",
    "imgix.js": "~2.0.0",
    "es5-shim": "~4.3.1",
    "es6-shim": "~0.33.12"
  },
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "resolutions": {
    "angular": ">=1.2",
    "angular-material": "0.x",
    "angular-sanitize": "~1.4.3"
  }
}

[JoshBargar]

@mcblum When I explicitly declared "angular": "1.4.7" in resolutions and ran bower install --force-latest, it worked for me. I was also using the latest version of angular material (1.x).

[mcblum]

Thank you @JoshBargar! 1.4.7 did it!

[JoshBargar]

@mcblum no problem. Glad I could help!

[warpdesign]

+1 Same problem here. I can't switch to latest Angular though. I'm using 1.3.15