title: AngularJS, using routes without refreshes on back button
body: <p>I'm using <code>angularJS</code> to build a simple single page application using AJAX, but I'm running into a problem when users use the native back button.</p>
  
  <pre><code>angular.module('myApp', ['ionic', 'myApp.controllers', myApp.services])
  
  .config(function ($routeProvider, $locationProvider) {
  
      $routeProvider.when('/home', {
         templateUrl: 'templates/feed.html',
         controller: 'MenuCtrl',
         reloadOnSearch: false
     });
  
     $routeProvider.when('/checkin/view/:id', {
         templateUrl: 'templates/checkin.html',
         controller: 'MenuCtrl'
      });
  
      $routeProvider.otherwise({
          redirectTo: '/home'
      });
  
  
       $locationProvider.html5Mode(true)
  
  })
  </code></pre>
  
  <p><strong>UPDATE: moved $http out of controls per feedback, and suggestions:</strong></p>
  
  <p>And my <code>services.js</code> file:</p>
  
  <pre><code>angular.module('myApp.services', [])
  
   .factory('FeedService', ['$http', function($http){
     var state = {};
  
    var loadFeed = function(){
         $http({
             method: 'GET',
             url: 'http://api.example',
           }).success(function(data){
          // With the data succesfully returned, call our callback
             state = data.response;
             console.log(data);
          }).error(function(){
             alert("error");
         });
     };
  
     loadFeed();
  
     return {
         getState: function(scope){
             return state;
         }
      };
  }])
  </code></pre>
  
  <p>And my <code>controller.js</code> file:</p>
  
  <pre><code>angular.module('myApp.controllers', [])
  
  .controller('MenuCtrl', function($scope, $http, $location, FeedService) { 
      // feedback per second answer
      $scope.items  = FeedService.getState();
  
  })
  
  .controller('CheckinCtrl', function($scope, $routeParams) {
      $scope.checkin_id = $routeParams.id;
      console.log($routeParams.id);
  });
  </code></pre>
  
  <p>My main <code>index.html</code> is setup like this:</p>
  
  <pre><code> &lt;body ng-app="untappd"&gt;
     &lt;div ng-view&gt;&lt;/div&gt;
   &lt;/body&gt;
  </code></pre>
  
  <p>This works great from navigation from a feed <code>(/home)</code>, to a check-in page <code>(/checkin/view/:id)</code> but, once the user hits the native back button on the browser or using <code>window.history.back()</code>, code in the <code>controller</code> is called again, which makes the AJAX call to pull down the user's friend feed. Should I be using <code>ng-show</code> instead of using <code>ng-view</code> for this use case, and create individual "pages" for each content I want to show? I was concerned with the performance, but it appears that I can't get data to persist in each <code>ng-view</code> without it having to re-call the templates. Any guidance here?</p>
  
  <p><strong>UPDATE: I have changed this to incorporate the Best Practices, by adding the <code>$http</code> request at the <code>services</code> level, instead of the <code>controller</code> level. I still run in to the issue of the getState request being fired, before the the AJAX of the <code>$http</code> is complete, thus having an empty state, and nothing to render the <code>$scope</code>.</strong></p>