AngularJS reload page does not work

Question

I need to refresh a list after an update and I've tried all the solutions and none worked for me, I'm a newbie to Angular.

My code is:

index.html

<div ng-controller="customersCrtl">
<div class="container">
<br/>
<blockquote><h4>Registro de Ingreso</h4></blockquote>
<br/>
<div class="row">
    <div class="col-md-2">Limite de Pagina:
        <select ng-model="entryLimit" class="form-control">
            <option>10</option>
            <option>50</option>
            <option>100</option>
            <option>250</option>
            <option>500</option>
        </select>
    </div>
    <div class="col-md-3">Buscar Por:
        <input type="text" ng-model="search" ng-change="filter()" placeholder="Carnet de Identidad" class="form-control" />
    </div>
    <div class="col-md-4">
        <h5>Listados {{ filtered.length }} de {{ totalItems}} Clientes registrados</h5>
    </div>
</div>
<br/>
<div class="row">
    <div class="col-md-12" ng-show="filteredItems > 0">
        <table class="table table-striped table-bordered">
        <thead>
        <th>ID Cliente&nbsp;</th>
        <th>Nombre&nbsp;</th>
        <th>eMail&nbsp;</th>
        <th>Detalles&nbsp;</th>
        <th>Marcar Ingreso&nbsp;</th>
        </thead>
        <tbody>
            <tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
                <td>{{data.id}}</td>
                <td>{{data.name}}</td>
                <td>{{data.email}}</td>
                <td>{{data.extras}}</td>
                <td><a ng-click="updateCliente(data.id)" class="pull-right"><i class="glyphicon glyphicon-ok-sign"></i></a></td>
            </tr>
        </tbody>
        </table>
    </div>
    <div class="col-md-12" ng-show="filteredItems == 0">
        <div class="col-md-12">
            <h4>No customers found</h4>
        </div>
    </div>
    <div class="col-md-12" ng-show="filteredItems > 0">    
        <div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="&laquo;" next-text="&raquo;"></div>


    </div>
</div>

and my app.js

var app = angular.module('myApp', ['ui.bootstrap']);

app.filter('startFrom', function() {
return function(input, start) {
    if(input) {
        start = +start; //parse to int
        return input.slice(start);
    }
    return [];
}
});
app.controller('customersCrtl', function ($scope, $http, $timeout) {
$http.get('ajax/getCustomers.php').success(function(data){
    $scope.list = data;
    $scope.currentPage = 1; //current page
    $scope.entryLimit = 5; //max no of items to display in a page
    $scope.filteredItems = $scope.list.length; //Initially for no filter  
    $scope.totalItems = $scope.list.length;
});
$scope.setPage = function(pageNo) {
    $scope.currentPage = pageNo;
};
$scope.filter = function() {
    $timeout(function() { 
        $scope.filteredItems = $scope.filtered.length;
    }, 10);
};
$scope.sort_by = function(predicate) {
    $scope.predicate = predicate;
    $scope.reverse = !$scope.reverse;
};
$scope.reload = function() {
    location.reload(); 
}; 
$scope.updateCliente = function (cliente) {
if(confirm("Confirma el ingreso?")){
$http.post("ajax/updateCliente.php?idCliente="+cliente).success(function(data){
    reload();
  });
 }
};

});

On the success event of the post, I need to reload. The DB is updated, so the result of the http.post must be a Success.

I have also tried with $window.location.reload(); instead of location.reload(); and it did not work.

Answer 1

Don't forget your reload function is in scope so call it via $scope.

Replace

reload();

By

$scope.reload();

Answer 2

Instead of reloading the page, fetch the data again

Note: I am using then not success as the latter is deprecated, so observe the difference in how data is accessed)

(function () {
  "use strict";

  app.controller({CustomersController});

  CustomersController.$inject = ['$scope', '$http', '$timeout'];
  function CustomersController($scope, $http, $timeout) {

    getData(); // defined below

    function getData() {
      $http.get('ajax/getCustomers.php').then(function (response) {
        $scope.list = response.data;
        $scope.currentPage = 1; //current page
        $scope.entryLimit = 5; //max no of items to display in a page
        $scope.filteredItems = $scope.list.length; //Initially for no filter  
        $scope.totalItems = $scope.list.length;
      });
    }

    $scope.updateCliente = function (cliente) {
      if(confirm("Confirma el ingreso?")) {
        // Below, we pass `getData` as the function that will be called when the 
        // http request completes successfully. This will refresh the data on `$scope`
        $http.post("ajax/updateCliente.php?idCliente=" + cliente).then(getData);
      }
    };
  }

}());