I'm struggling to incorporate the md-data-table library from https://github.com/daniel-nagy/md-data-table into my webpage. Despite loading the library in Chrome, none of the directives seem to be working. Here's a snippet of my code - can anyone spot what I may have overlooked?
<div ng-controller="MapsCtrl as vm">
<md-table-container>
<table md-table md-row-select multiple ng-model="vm.selected" md-progress="promise">
<thead md-head md-order="query.order" md-on-reorder="getDesserts">
<tr md-row>
<th md-column md-order-by="vm.mapName"><span>Map Name</span></th>
<th md-column>Map Id</th>
</tr>
</thead>
<tbody md-body>
<tr md-row md-select="vm.dessert" md-select-id="name" md-auto-select ng-repeat="map in vm.maps">
<td md-cell>{{map.name}}</td>
<td md-cell>{{map._id}}</td>
</tr>
</tbody>
</table>
</md-table-container>
<md-table-pagination md-limit="query.limit" md-limit-options="[5, 10, 15]" md-page="query.page" md-total="{{desserts.count}}"
md-on-paginate="getDesserts" md-page-select></md-table-pagination>
</div>
My Controller:
angular.module("mymaps").controller('MapsCtrl',MapsCtrl);
//Inject dependencies here for minification.
MapsCtrl.$inject = ["userService", '$http', '$mdDialog',"$scope"];
//This is the actual controller
function MapsCtrl(userService,$http, $mdDialog, $scope){
var vm = this;
vm.maps = [
{_id:1,name:"Map 1"},
{_id:2,name:"Map 3"},
{_id:3,name:"Map 3"}
];
$scope.selected = [];
$scope.query = {
order: 'name',
limit: 5,
page: 1
};
}
And the app:
angular.module('mymaps', ['ngMaterial', 'md.data.table', 'ngMessages'])