How to use ion-refresher?

ionic-v1
1

Hello,

I would like to know how to use ion-refresher on my homepage. I would like to be able to update the data displayed there and I do not know how to do it in my controller.
Someone could help me please, because I can not find an example using a database.

My view :

<ion-view title="Home" hide-back-button="true" id="page1">
  <!-- <ion-nav-buttons side="right" class="has-header">
    <a class="button button-icon icon No Icon" ui-sref="menu.statistiques">Activités</a>
  </ion-nav-buttons> -->
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon button-clear ion-navicon menu-icon"></button>
  </ion-nav-buttons>
  <ion-content padding="true" class="has-header">
  
  <ion-refresher on-refresh="doRefresh(true)">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="Pull to refresh"
      refreshingSpinner="circles"
      refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>

    <div id="accueil-markdown4" style="text-align:center;" class="show-list-numbers-and-dots">
      <p style="color:#2f81b7;font-size:20px;">Hello {{ prenom | UpFirstLetter }} !</p>
    </div>
    <hr/>
    <div class="item-verte">
      <ion-list id="accueil-list14">
        <ion-item class="item-thumbnail-left accueil-item-vert" id="accueil-list-item35">
          <h2 class="accueil-blanc">Décompte Visites</h2>
          <p class="accueil-blanc">Le nombre de visites réalisées</p>
          <img class="icon-accueil" src="img/icon-acceuil-1.png">
        </ion-item>
      </ion-list>
      <div class="item item-body" id="accueil-list-item-container6">
        <div id="accueil-markdown13" class="show-list-numbers-and-dotss">
          <p>{{nbVisite || 'Chargement..'}} Visites</p>
        </div>
      </div>
    </div>
    <div class="spacer"></div>
    <div class="accueil-container4">
      <ion-list id="accueil-list12">
        <ion-item class="item-thumbnail-left" id="accueil-list-item36">
          <h2 class="accueil-blanc">Dernières Visites</h2>
          <p class="accueil-blanc">Les comptes-rendus des visites</p>
          <img class="icon-accueil" src="img/icon-acceuil-2.png">
        </ion-item>
        <ion-item class="item-icon-right blanc-cr" id="accueil-list-item31" ng-repeat="element in liste | limitTo:limit">
          <div class="compte-rendu-style" ng-click="showDescr(element)">
            <div>
              <span style="font-weight:bold">Compte-rendu</span> 
              <span> {{ element.dateVisite.date | dateOnly: "dd MMMM y"}}</span>
              <div class="item-note">
                <p class="capitalize" ng-bind-html="element.patientPnom">{{ element.patientPnom | UpFirstLetter }} </p>
                <i class="icon ion-ios-arrow-right icon-cr"></i>
              </div>
            </div>
          </div>
        </ion-item>
      </ion-list>
    </div>
     <hr/>
  </ion-content>
</ion-view>

My controller :

.controller('homeCtrl', function ($scope, $state, $http, $ionicLoading, AppService) {
		    console.log("called");
		    $ionicLoading.show();
		    AppService.user().then(function (response) {
		      $scope.prenom = response.pnom;
		    });
		    AppService.statNational().then(function (response) {
		      $scope.nbVisite = response.nbVisite;
		    });
		    AppService.CRlist().then(function (response) {
		      $scope.liste = JSON.parse(JSON.stringify(response));
		      $scope.limit = 3;
		      $ionicLoading.hide();
		    });
		    $scope.showDescr = function (currObj) {
		      AppService.addObject(currObj);
		      $state.go('menu.compteRendu');
		    }
		    AppService.refreshToken().then(function (response) {
		      if ($scope.token) {
		        console.info('Refresh');
		      }
		    });
		  })

Thank you in advance for your answers

2

use following code with code pen