ddd ddd - 1 year ago 94
HTML Question

Why can't I display records with ngTable

I was trying to display records on html using ngTable. The records are retrieved from server side through rest api.


<div class="container">
<table ng-table="tableParams" class="table" show-filter="false">
<tr ng-repeat="report in $data">
<td title="'ReportId'" filter="{ reportid: 'text'}" sortable="'reportid'">
<td title="'SampleId'" filter="{ sampleid: 'text'}" sortable="'sampleid'">
<td title="'MRN'" filter="{ mrn: 'text'}" sortable="'mrn'">
<td title="'Diagnosis'" filter="{ diagnosis: 'text'}" sortable="'diagnosis'">


['$scope', 'fmFactory', 'NgTableParams', function($scope, fmFactory, NgTableParams) {
$scope.selection = '0';
$scope.fmSearch = function () {
if ($scope.selection == '0') {
$scope.tableParams = new NgTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
getData: function (params) {
return fmFactory.getAll().then(function(data) {
return data.results;

Factory js

ristoreApp.factory("fmFactory", ['$http', '$window',
function ($http, $window) {
var service = {};

service.getAll = function () {
var url = SERVER + "/ristore/foundation/";
return $http({
headers: {'Authorization': 'Bearer ' + $window.localStorage.getItem("access_token")},
url: url,
method: 'GET',
crossOrigin: true

return service;

The factory definitely returns records from server correctly, because when I debug it, it shows the data of the response.

However it does not show anything on the page. What went wrong?

Answer Source

Do these things

  1. Change $scope.tableParams in controller to this.tableParams
  2. Change <div ng-controller="fmCtrl"> in view to <div ng-controller="fmCtrl as fm">
  3. Change ng-table="tableParams" in view to ng-table="fm.tableParams"

Documentation: http://ng-table.com/#/loading/demo-external-array

Update 1: Change the return rmFactory.getAll() like this,

return fmFactory.getAll().then(function(response) {
    var reports = response.data;
    return reports;

Update 2: Add this line to controller beginning (first line)

var self = this;

The first change we made, rewrite it like this.


Update 3: We removed $scope and used this because the documentation was using that. this did not work here because, we were inside $scope.fmSearch. So to get this of the controller, we stored it in a variable self and accessed it. You can rename self to any name of your choice.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download