ngTableで動的に作成した列をソートしてフィルタリングする

Question

このplunkには、動的に作成された列を持つngTableがあります。列はソート可能でフィルタリング可能ですが、タイトルをクリックするとソートが機能せず、フィルタも機能しません。何か案は？

Javascriptを

var app = angular.module('app', ['ngTable']); 

app.controller('myCtl', function($scope,NgTableParams) { 

    $scope.cols = [ 
     {nm:'uid', title:'User ID', sortable: 'uid', filter:{uid: 'text'}}, 
     {nm:'ugr', title: 'Group ID', sortable: 'ugr',filter:{ugr: 'text'}} 
     ]; 


     $scope.data = [ 
     { uid: 'aaa',ugr: '222'}, 
     { uid: 'bbb', ugr: '111'} 
     ]; 

     $scope.tableParams = new NgTableParams({dataset: $scope.data}); 

}); 

HTML

<div ng-controller="myCtl" ng-app="app"> 

    <table ng-table-dynamic="tableParams with cols" show-filter="true" class="table table-bordered table-hover"> 
    <tr ng-repeat="row in data"> 
     <td ng-repeat="col in cols">{{row[col.nm]}}</td> 
    </tr> 
    </table> 

</div> 

Answer 1

1) Add references to AngularJS. EG: 

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script> 

2)Add references to ngTable's javascript and css files. EG: 

<link rel="stylesheet" href="https://cdn.rawgit.com/esvit/ng-table/v1.0.0/dist/ng-table.min.css"> 
<script src="https://cdn.rawgit.com/esvit/ng-table/v1.0.0/dist/ng-table.js"></script> 

3)Where you declare your app module, add ngTable: 

angular.module("myApp", ["ngTable"]); 

4)In your html file within the controller where you plan to use ng-table, add: 

<table ng-table="vm.tableParams" class="table" show-filter="true"> 
    <tr ng-repeat="user in $data"> 
     <td title="'Name'" filter="{ name: 'text'}" sortable="'name'"> 
      {{user.name}}</td> 
     <td title="'Age'" filter="{ age: 'number'}" sortable="'age'"> 
      {{user.age}}</td> 
    </tr> 
</table> 

5)In your javascript file within the controller where you plan to use ng-table, declare: 

var self = this; 
var data = [{name: "Moroni", age: 50} /*,*/]; 
self.tableParams = new NgTableParams({}, { dataset: data}); 

デモenter link description here