Trying to setup sort on a table using smart-table in angularjs

Question

Using angularjs with smart-table. Table headers are drawn but no data rows. Without smart-table data shows up fine. Any ideas?

error in console ..

"Error: [$compile:ctreq] http://errors.angularjs.org/1.4.7/$compile/ctreq?p0=stTable&p1=stSort

dataset ..

[{
    "name": "Robert B",
        "associatedNumber": 21,
        "standing": true
}, {
    "name": "Martin C",
        "associatedNumber": 55,
        "standing": true
}, {
    "name": "Bobby B",
        "associatedNumber": 15,
        "standing": true
}]

json is returned by an api, /players ..

var app = angular.module('lmsHome', ['smart-table']);
app.controller('lmsHomeCtrl', function ($scope, $http) {
    $http.get("/players").success(function (response) {
        $scope.players = response;
    });
});

html ..

<div ng-app="lmsHome" ng-controller="lmsHomeCtrl">
    <table class="table table-hover">
        <thead>
            <tr>
                <th st-sort="name">Player</th>
                <th st-sort="associatedNumber">Number</th>
                <th st-sort="standing">Still standing?</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="player in players" ng-class="{'success': player.standing}">
                <td ng-cloak>
                    <span ng-show="player.standing">
                        {{player.name}}
                    </span>
                    <span ng-show="!player.standing">
                        <strike>{{player.name}}</strike>
                    </span>
                </td>
                <td ng-cloak>{{player.associatedNumber}}</td>
                <td ng-cloak>
                    <span class="label">{{player.standing}}</span>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/jquery/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/bootstrap/js/bootstrap.min.js"></script>
<!-- Angularjs -->
<script src="/angular/angular.min.js"></script>
<!-- A table/grid for Angularjs -->
<script src="/table/smart-table.min.js"></script>
<!-- Custom logic -->
<script src="/js/homeLogic.js"></script>

Answer 1

According to the documentation for Smart Table, in order to use Smart Table,

The first thing is to add the module angular.module('myApp',['smart-table'] to your angular application. Then use the markup you would normally do for html tables. On the table element add the st-table attribute to tell smart-table which collection holds your displayed data, (ie the one you are going to use in the repeater). Now you will be able to compose the table using the plugins.

So it appears as you are missing the st-table attribute.

<table class="table table-hover" st-table="players">
  <thead>
    <tr>
      <th st-sort="name">Player</th>
      <th st-sort="associatedNumber">Number</th>
      <th st-sort="standing">Still standing?</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="player in players" ng-class="{'success': player.standing}">
      ...
    </tr>
  </tbody>
</table>