Service using $http not returning new data

Question

AngularJS ng-repeat not changing when array changes

I have a controller:

  <section data-ng-controller="FilmController">
    <article data-ng-view></article>
  </section>

This is its controller:

.controller('FilmController',
      [
        '$scope',
        'dataService',
        '$routeParams',
        function ($scope, dataService, $routeParams) {
          var getFilms = function(searchterm, category, page){
            dataService.getFilms(searchterm, category, page).then(
              function(response){
                $scope.films = [];
                $scope.films = response.data;
                let pageLinks = [];
                for (let i = 0; i < response.data[10][0]; i += 10) {
                  pageLinks.push({
                    pageLink: "/wai/wai-assignment/#/films?searchterm=" + searchterm + "&category=" + category + "&page=" + i/10,
                    pageNum: i/10
                  })
                }
                $scope.pageLinks = pageLinks;
                console.log(pageLinks);
              },
              function(err){
                $scope.status = 'Unable to load data' + err;
              },
              function(notify){
                console.log(notify);
              }
            );
          }

          if ($routeParams && ($routeParams.searchterm || $routeParams.category)){
            getFilms($routeParams.searchterm, $routeParams.category, $routeParams.page);
          } else {
            getFilms('','',$routeParams.page);
          }
        }
      ]);

These are the routes:

app.config(
        [
            '$routeProvider',

            function ($routeProvider) {
                $routeProvider
                    .when('/films', {
                        templateUrl: 'js/partials/films.html',
                        controller: 'FilmController'
                    })
                    .otherwise({
                        redirectTo: '/'
                    });
            }
        ]
    );

Here is the template:

<section>
  <table>
    <tr data-ng-repeat="film in films">
      <td>{{film.title}}</td>
      <td>{{film.name}}</td>
      <td>{{film.description}}</td>
    </tr>
  </table>
  <a data-ng-repeat="pageLink in pageLinks" ng-href="{{pageLink.pageLink}}">
    {{pageLink.pageNum}}
  </a>
</section>

When i access films?searchterm=example&category=example&page=1

It shows films with the category and search criteria from a database. When i click a link to go to a different page, it just grabs data from an SQL statement with a different OFFSET, but the ng-repeat doesn't update with it.

I know why this happens, something to do with scopes, but i can't work out how to fix it. Can anyone help?

EDIT:

angular.module('filmDirectoryApp')
    .service('dataService',
        [
          '$q',
          '$http',
          function ($q, $http) {
            var urlBase = 'server/';
            var defer = $q.defer();
            this.getFilms = function (searchterm, category, page) {
              $http.get(urlBase + 'getfilms.php?searchterm=' + searchterm + '&category=' + category + '&page=' + page)
                .success(function (response) {
                  console.log(response);
                  defer.resolve({
                      data: response
                  });
                })
                .error(function (err) {
                    defer.reject(err);
                });
                return defer.promise;
            }
          }
        ]
      );

Answer 1

The code uses a deferred anti-pattern that is written incorrectly. The $q.defer only resolves once. Subsequent calls to defer.resolve are ignored. This is the way promises work.

In addition the .success and .error methods are deprecated and have been removed from the AngularJS framework.

The solution is to avoid the deferred anti-pattern and use the .then and .catch methods.

angular.module('filmDirectoryApp')
.service('dataService',
    [
      '$http',
      function ($http) {
        var urlBase = 'server/';
        this.getFilms = function (searchterm, category, page) {
          var params = {
              "searchterm": searchterm,
              "category"  : category,
              "page"      : page
          };
          var config = { "params": params };    
          return $http.get(urlBase + 'getfilms.php', config)
            .then(function (response) {
              var data = response.data;
              console.log(data);
              return data;
            })
            .catch(function (err) {
              console.log(err)
              throw err;
            });
        }
      }
    ]
);

The $http service deprecated custom callback methods - .success() and .error() - have been removed. You can use the standard .then()/.catch() promise methods instead, but note that the method signatures and return values are different.

The .then method returns a new promise which is resolved or rejected via the return value of the successCallback, errorCallback (unless that value is a promise, in which case it is resolved with the value which is resolved in that promise using promise chaining).

For more information, see

• AngularJS $q Service API Reference - The Promise API
• Is this a deferred anti-pattern?
• Why were .success and error removed from the $http service?