title: angular smart table not working
body: <p>I am using smart table <a href="http://lorenzofox3.github.io/smart-table-website/" rel="nofollow noreferrer">http://lorenzofox3.github.io/smart-table-website/</a> and I am trying to follow pipe/ajax plugin example. But its not showing any data. this is what I have in my html</p>
  
  <pre><code>&lt;div ng-controller="AboutCtrl"&gt;
    &lt;table class="table" st-pipe="mc.callServer" st-table="mc.displayed"&gt;
      &lt;thead&gt;
      &lt;tr&gt;
        &lt;th st-sort="id"&gt;id&lt;/th&gt;
        &lt;th st-sort="name"&gt;name&lt;/th&gt;
        &lt;th st-sort="age"&gt;age&lt;/th&gt;
        &lt;th st-sort="saved"&gt;saved people&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;th&gt;&lt;input st-search="id"/&gt;&lt;/th&gt;
        &lt;th&gt;&lt;input st-search="name"/&gt;&lt;/th&gt;
        &lt;th&gt;&lt;input st-search="age"/&gt;&lt;/th&gt;
        &lt;th&gt;&lt;input st-search="saved"/&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody ng-show="!mc.isLoading"&gt;
      &lt;tr ng-repeat="row in mc.displayed"&gt;
        &lt;td&gt;{{row.id}}&lt;/td&gt;
        &lt;td&gt;{{row.name}}&lt;/td&gt;
        &lt;td&gt;{{row.age}}&lt;/td&gt;
        &lt;td&gt;{{row.saved}}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tbody ng-show="mc.isLoading"&gt;
      &lt;tr&gt;
        &lt;td colspan="4" class="text-center"&gt;Loading ... &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tfoot&gt;
      &lt;tr&gt;
        &lt;td class="text-center" st-pagination="" st-items-by-page="10" colspan="4"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tfoot&gt;
    &lt;/table&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>and here is my js</p>
  
  <pre><code>angular.module('eventsApp')
    .controller('AboutCtrl', ['Resource', function (service) {
  
      var ctrl = this;
  
      this.displayed = [];
  
      this.callServer = function callServer(tableState) {
  
        ctrl.isLoading = true;
  
        var pagination = tableState.pagination;
  
        var start = pagination.start || 0;     // This is NOT the page number, but the index of item in the list that you want to use to display the table.
        var number = pagination.number || 10;  // Number of entries showed per page.
  
        service.getPage(start, number, tableState).then(function (result) {
          ctrl.displayed = result.data;
          tableState.pagination.numberOfPages = result.numberOfPages;//set the number of pages so the pagination can update
          ctrl.isLoading = false;
        });
      };
  
    }]).factory('Resource', ['$q', '$filter', '$timeout', function ($q, $filter, $timeout) {
  
    //this would be the service to call your server, a standard bridge between your model an $http
  
    // the database (normally on your server)
    var randomsItems = [];
  
    function createRandomItem(id) {
      var heroes = ['Batman', 'Superman', 'Robin', 'Thor', 'Hulk', 'Niki Larson', 'Stark', 'Bob Leponge'];
      return {
        id: id,
        name: heroes[Math.floor(Math.random() * 7)],
        age: Math.floor(Math.random() * 1000),
        saved: Math.floor(Math.random() * 10000)
      };
  
    }
  
    for (var i = 0; i &lt; 1000; i++) {
      randomsItems.push(createRandomItem(i));
    }
  
  
    //fake call to the server, normally this service would serialize table state to send it to the server (with query parameters for example) and parse the response
    //in our case, it actually performs the logic which would happened in the server
    function getPage(start, number, params) {
  
      var deferred = $q.defer();
  
      var filtered = params.search.predicateObject ? $filter('filter')(randomsItems, params.search.predicateObject) : randomsItems;
  
      if (params.sort.predicate) {
        filtered = $filter('orderBy')(filtered, params.sort.predicate, params.sort.reverse);
      }
  
      var result = filtered.slice(start, start + number);
  
      $timeout(function () {
        //note, the server passes the information about the data set size
        deferred.resolve({
          data: result,
          numberOfPages: Math.ceil(filtered.length / number)
        });
      }, 1500);
  
  
      return deferred.promise;
    }
  
    return {
      getPage: getPage
    };
  
  }]);
  </code></pre>
  
  <p>and this is what my browser show</p>
  
  <p><a href="https://i.stack.imgur.com/uznVG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uznVG.png" alt="enter image description here"></a></p>