title: Ionic - Reload and display new data in ng-repeat when clicking back button
body: <h2>Background</h2>
  
  <p>I have an <code>ng-repeat</code> list that goes to a details page (which has a back button). The <code>$scope.items</code> variable is loaded from a get request that occurs when the page is first loaded, with my <code>refreshItems()</code> function.</p>
  
  <h2>The Problem</h2>
  
  <p>When you click the back button on the details page, you are taken back to the correct page, but the list is <strong>not</strong> refreshed. I need this list to refresh so the new items are loaded and shown.</p>
  
  <h2>Attempted Solution</h2>
  
  <p>I thought that I could simply hook up the Back button to an <code>ng-click</code> function that uses <code>ionicHistory</code> to go back, and then calls my <code>refreshItems()</code> function; however, this does not reload the items on the first page.</p>
  
  <p>The above attempt <em>does</em> go back to the last page <strong>and</strong> trigger the <code>refreshItems()</code> function (and the new data is loaded, which I can see thanks to <code>console.log()</code> statements), but I'm guessing the ng-repeat needs to be rebuilt. I found some information on <code>$scope.$apply()</code> as well as <code>$route.reload()</code> but neither of these fixed the problem when I placed them at the end of my <code>goBack()</code> function.</p>
  
  <h2>Code Excerpts</h2>
  
  <p><strong>controller.js</strong></p>
  
  <pre><code>$scope.refreshItems = function() {
  
      console.log("Refreshing items!");
  
      $http.get('http://domain/page.aspx').then(function(resp) {
          $scope.items = resp.data; console.log('[Items] Success', resp.data);
      }, function(err) { console.error('ERR', err); });
  
  };
  
  
  $scope.goBack = function() {
      $ionicHistory.goBack();
      $scope.refreshItems();
  };
  </code></pre>
  
  <p><strong>Main Page HTML</strong></p>
  
  <pre><code>&lt;div class="list"&gt;
  
      &lt;a ng-repeat="i in items" class="item" href="#/tab/details?ID={{i.Item_ID}}"&gt;
          &lt;b&gt;Item {{i.Item_Name}}&lt;/b&gt;
      &lt;/a&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Back Button on Details Page</strong></p>
  
  <pre><code>&lt;ion-nav-bar&gt;
      &lt;ion-nav-back-button class="button-clear" ng-click="goBack();"&gt;
          &lt;i class="ion-arrow-left-c"&gt;&lt;/i&gt; Back
      &lt;/ion-nav-back-button&gt;
  &lt;/ion-nav-bar&gt;
  </code></pre>
  
  <hr>
  
  <h2>Possible Direction?</h2>
  
  <p>I have a <code>refresher</code> on the main page which calls <code>refreshItems()</code> - and it refreshes them correctly. The problem is most certainly when I try to pair refreshing with either <code>$ionicHistory.goBack()</code> or <code>$state.go()</code>. Is there a way I can programmatically call the refresher (after/on load), since directly calling the function that refresher is calling is not working?</p>