angularjs ng-table is not showing data on returning to listing

Question

I'm using AngularJS 1.2.10 stable with a Rails project and I'm trying to get ng-table working with my data and nothing is showing up.

I've included the ng-table files and included it in my angular module. I'm getting data when I refresh the page, but if I navigate away from this view, then back again within the single page app it's not loading the data. ie: Refresh the browser on the listing and all the data is there, I go to view an individual item and I'm taken to a new page (via angularJS routing) then I return to the listing (via angularJS routing again) and the data is empty/there is no listing.

Here is my table

<table ng-table="tableParams" class="table">
  <tr ng-repeat="debtor in debtors">
    <td data-title="'Code'" sortable="'code'">{{debtor.code}}</td>
    <td data-title="'Name'" sortable="'name'">{{debtor.name}}</td>
    <td>
      <a href="/api#/clients/{{debtor.id}}">Show</a>
      <a href="/api#/clients/{{debtor.id}}/edit">Edit</a>
      <a href="" ng-confirm-click="destroy(debtor.id)">Delete</a>
    </td>
  </tr>
</table>

Here is my controller where I get my data.

app.controller "DebtorsController", ['$window', '$scope', '$http', '$location', '$state', '$stateParams', '$modal', '$timeout', 'flash', 'Common', 'Debtor', 'Client', 'ngTableParams', '$filter', ($window, $scope, $http, $location, $state, $stateParams, $modal, $timeout, flash, Common, Debtor, Client, ngTableParams, $filter) ->

  # --------------------------------------------------------------------------------
  # Initialise
  # --------------------------------------------------------------------------------
  $scope.debtors = {}

  # --------------------------------------------------------------------------------
  # Index
  # --------------------------------------------------------------------------------
  if $state.current.name == "debtors"
    Debtor.query {},
      (data) ->
        # Define ng-table params
        $scope.tableParams = new ngTableParams({
          page: 1,
          total: data.length,
          count: 10
        })

  # --------------------------------------------------------------------------------
  # Index
  # --------------------------------------------------------------------------------
  if $state.current.name == "debtors"
    $data = []
    Debtor.query {}, (response) -> $data = response
    console.log "debtors index"

    $scope.tableParams = new ngTableParams({
      page: 1,
      count: 10,
      sorting: { name: 'asc'}
    }, {
      total: $data.length,
      getData: ($defer, params) ->
        console.log "run deferred"
        orderedData = (if params.sorting then $filter('orderBy')($data, params.orderBy()) else $data)
        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()))
    })

I can see in chromes console that it's calling

XHR finished loading: "http://localhost:3000/assets/layouts/default.html.erb". angular-min.js?body=1:1825
XHR finished loading: "http://localhost:3000/assets/debtors/index.html.erb". angular-min.js?body=1:1825

debtors index  

ngTable: set settings 
Object {$scope: null, $loading: false, data: null, total: 0, counts: Array[4]…}
 angular-min.js?body=1:2147
ngTable: set parameters 
Object {page: 1, count: 10, filter: Object, sorting: Object, group: Object…}
 angular-min.js?body=1:2147
XHR finished loading: "http://localhost:3000/debtors". angular-min.js?body=1:1825
XHR finished loading: "http://localhost:3000/assets/debtors/_listing.html.erb". angular-min.js?body=1:1825
ngTable: reload data angular-min.js?body=1:2147
ngTable: current scope 
$get.h.$new.a {$id: "006", this: $get.h.$new.a, $$listeners: Object, $$listenerCount: Object, $parent: $get.h.$new.a…}
 angular-min.js?body=1:2147

run deferred

ngTable: reload data angular-min.js?body=1:2147
ngTable: current scope 
$get.h.$new.a {$id: "006", this: $get.h.$new.a, $$listeners: Object, $$listenerCount: Object, $parent: $get.h.$new.a…}
 angular-min.js?body=1:2147

(I clicked on 'show' for one of the items)

XHR finished loading: "http://localhost:3000/assets/clients/show.html.erb". angular-min.js?body=1:1825
XHR finished loading: "http://localhost:3000/clients/2". angular-min.js?body=1:1825
XHR finished loading: "http://localhost:3000/locations.json". angular-min.js?body=1:1825

(I clicked on 'listing' which takes me back to the debtors listing)

debtors index

ngTable: set settings 
Object {$scope: null, $loading: false, data: null, total: 0, counts: Array[4]…}
 angular-min.js?body=1:2147
ngTable: set parameters 
Object {page: 1, count: 10, filter: Object, sorting: Object, group: Object…}
 angular-min.js?body=1:2147
ngTable: reload data angular-min.js?body=1:2147
ngTable: current scope 
$get.h.$new.a {$id: "017", this: $get.h.$new.a, $$listeners: Object, $$listenerCount: Object, $parent: $get.h.$new.a…}
 angular-min.js?body=1:2147

run deferred

ngTable: reload data angular-min.js?body=1:2147
ngTable: current scope 
$get.h.$new.a {$id: "017", this: $get.h.$new.a, $$listeners: Object, $$listenerCount: Object, $parent: $get.h.$new.a…}
 angular-min.js?body=1:2147
XHR finished loading: "http://localhost:3000/debtors". 

On returning to the debtors listing it is not calling these two lines:

XHR finished loading: "http://localhost:3000/debtors". angular-min.js?body=1:1825
XHR finished loading: "http://localhost:3000/assets/debtors/_listing.html.erb". angular-

I think it has to reload the data, not so much the template though as I can see that.

Answer 1

Noticed that I had to go and get the data withing the getData part of ngTableParams and wait for it to successfully return with my data before applying the filter and handing it back to be rendered.

  # --------------------------------------------------------------------------------
  # Index
  # --------------------------------------------------------------------------------
  if $state.current.name == "debtors"

    # Setup ng-table with defaults and data
    $scope.tableParams = new ngTableParams({
      page: 1,
      count: 10,
      sorting: { name: 'asc'}
    }, {
      total: $data.length,
      # ng-table will ask for updated data, this is where it gets it from.
      getData: ($defer, params) ->
        Debtor.query {}, (response) ->
          $data = response
          console.log 'run deferred'
          orderedData = (if params.sorting then $filter('orderBy')($data, params.orderBy()) else $data)
          $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()))
    })