UPDATE. Even this code doesn't work 100% correctly :( I start from one account, it shows correctly. I switch to another account, it also shows OK.

Then I switch to yet another account and nothing shows up. It always seems to be that same account. It shows Total Items 18 but refuses to show data.



I get everything working correctly if I don't use paging. As soon as I try to introduce paging, everything breaks again. Here is my current code with paging disabled:

app.controller('accountsCrudController', ['$scope', '$rootScope', '$modal', '$timeout',
        '$stateParams', '$state', '$filter',
      'accountsService',
      function ($scope, $rootScope, $modal, $timeout, $stateParams, $state, $filter, accountsService) {

          var linkCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">' +
                     '  <a href="{{row.getProperty(col.field)}}">{{row.getProperty(col.field)}}</a>' +
                     '</div>';
          var balanceCellTemplate = '<div ng-class="{\'field-validation-error\': row.getProperty(col.field) < 0}"><div class="ngCellText">{{row.getProperty(col.field)|currency}}</div></div>';

          $scope.emailPattern = /^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/;

          $scope.filterOptions = {
              filterText: "",
              useExternalFilter: false
          };

          $scope.totalServerItems = 0;

          $scope.pagingOptions = {
              pageSizes: [10, 15, 20],
              pageSize: 15,
              currentPage: 1
          };

          $scope.setPagingData = function (data, page, pageSize) {
              //var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
              var pagedData = angular.copy(data.slice((page - 1) * pageSize, page * pageSize)); // this is a work-around
              $scope.currentAccount.invoices = pagedData;
              $scope.totalServerItems = data.length;
              if (!$scope.$$phase) {
                  $scope.$apply();
              }
          };

   //       $scope.gridData = [];        
          $scope.gridOptions = {
              data: 'currentAccount.invoices',
              showFooter: true,
              enableColumnResize: true,
              enableColumnReordering: true,
              enableRowSelection: false,
              enablePaging: false,

              totalServerItems: 'totalServerItems',
              pagingOptions: $scope.pagingOptions,
              filterOptions: $scope.filterOptions,
              //rowTemplate: '<div style="height: 100%" ng-class="{label label-danger pull-right: row.getProperty(\'hidden\') == true}"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}"><div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }"> </div><div ng-cell></div></div></div>',
              columnDefs: [
              {
                  field: 'invoiceNo', displayName: 'Invoice #',
                  width: 70, resizable: true, sortable: true,
                  enableCellEdit: false,
                  cellTemplate: linkCellTemplate
              },
              { field: 'descrip', displayName: 'Description', width: 200, resizable: true, sortable: true },
              { field: 'created', displayName: 'Date Created', width: 150, resizable: true, sortable: true, cellFilter: "date: 'medium'" },

              {
                  field: 'balance', displayName: 'Balance', resizable: true, sortable: true,
                  cellTemplate: balanceCellTemplate
              }]
              
          };

          var init = function () {
              $scope.showForm = false;
              $scope.disableAction = false;
              $scope.isEditLoading = false;
              $scope.showFinalized = false;
              load($stateParams.id);
          };    

          var load = function (id) {
              if (id) {
                  loadAccount(id, false);
              } else {
                  loadAccount('null', true);
              }
          };

          $scope.getPagedDataAsync = function (pageSize, page, searchText) {
              //setTimeout(function ()
              {                
                  if ($scope.currentAccount) {
                      //var acctNameHash = $scope.currentAccount.acctNameHash;
                      //var showFinalized = $scope.showFinalized;
                      var largeLoad = $scope.invoices;
                      var data;
                      if (searchText) {
                          var ft = searchText.toLowerCase();
                          //$http.get('/api/accounts/getAccountInvoices/' + acctNameHash + '/' + showFinalized)
                          //    .success(function (largeLoad) 
                          {
                              data = largeLoad.filter(function (item) {
                                  return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                              });
                              // Always use first page after applying a filter
                              $scope.setPagingData(data, 1, pageSize);
                          };
                      } else {
                          //$http.get('/api/accounts/getAccountInvoices/' + acctNameHash + '/' + showFinalized)
                          //    .success(function (largeLoad)
                          {
                              $scope.setPagingData(largeLoad, page, pageSize);
                          }
                          //);
                      }
                  }
              }
              //, 100);
          };

          $scope.$watch('pagingOptions', function (newVal, oldVal) {
              if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
                  $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
              }
          }, true);

          $scope.$watch('showFinalized', function (newVal, oldVal) {
              if (newVal !== oldVal && $scope.currentAccount && !$scope.isNew) {
                  getAccountInvoices($scope.currentAccount.acctNameHash);
              }
          }, true);

          //$scope.$watch('filterOptions', function (newVal, oldVal) {
          //    if (newVal !== oldVal) {
          //        $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
          //    }
          //}, true);

          var getAccountInvoices = function (acctNameHash) {
              accountsService.getAccountInvoices(acctNameHash, $scope.showFinalized).then(function (data) {
                  $scope.currentAccount.invoices = data.invoices;
                  // Always start from the first page
  //                $scope.getPagedDataAsync($scope.pagingOptions.pageSize, 1, $scope.filterOptions.filterText);
              });
          };

          var loadAccount = function (id, isNew) {
              $scope.alertType = '';
              $scope.loadingTimeout = $timeout(function () {
                  $scope.isEditLoading = true;
              }, 250);
              accountsService.getAccount(id, isNew, $scope.showFinalized).then(function (data) {
                  $scope.currentAccount = data;
                  $scope.currentAccount.totalBalance = 0;
                  $("#email").val($scope.currentAccount.eMail);
                  $scope.currentAccount.fullPhone = $filter('phone')($.trim(data.areaCode) + '' + $.trim(data.phone));
                  var systemAccounts = ["*GUESTS*", "*RESRVATN*", "*TABLES*", "*DEBIT*"];

                  $scope.currentAccount.isSystemAccount = false;
                  $scope.isNew = isNew;
                 
                  if (!isNew) {
                      $scope.currentAccount.isSystemAccount = systemAccounts.indexOf($scope.currentAccount.acctName.trim()) >= 0;
                 
               //       $scope.setPagingData($scope.invoices,1, $scope.pagingOptions.pageSize);
                      accountsService.getAccountBalance($scope.currentAccount.acctNameHash).then(function (data) {
                          $scope.currentAccount.totalBalance = data.balance;                 
                      });
                  }
                  $scope.showForm = true;
                  $scope.alertType = '';
                  $scope.isEditLoading = false;
                  $timeout.cancel($scope.loadingTimeout);
                  $timeout(function () {
                      $rootScope.$broadcast('sm:resizeContainer');
                      $rootScope.$broadcast('sm:focus');
                  }, 0);
              });          
          };

I think I am going to live it like this for some time until you see a way to bring the paging in and not break it.

Thanks again.