title: Persisting data on "List" page while visiting "Details" page
body: <p>I'm an angular newbie so please bear with me.</p>
  
  <p>I've been trying to do this for a while and can't figure out how to do it.</p>
  
  <p>I have three (1 abstract parent) states, like so:</p>
  
  <pre><code>.state('recipes', {
      url: '/recipes',
      abstract: true,
      template: '&lt;ui-view/&gt;'
    })
    .state('recipes.listing', {
      url: '/listing',
      templateUrl: '/modules/recipes/client/views/recipes.listing.html',
      controller: 'RecipesController',
      controllerAs: 'vm',
      data: {
        pageTitle: 'Recipes'
      }
    })
    .state('recipes.details', {
      url: '/details',
      templateUrl: '/modules/recipes/client/views/recipes.details.html',
      controller: 'RecipesDetailsController',
      controllerAs: 'vm'
    });
  </code></pre>
  
  <p>From the Listing page, the user has a list they can select from.. Upon selecting from the list they visit the Details page via $state.go().  Now when they press the "back" button, they go back to the Listing page but all the data that they queried is now gone.  The only way I can think of doing it is converting the pages into views and inserting them into 1 state, and then showing/hiding them, but I felt this was not the Angular way.</p>
  
  <p>Thanks in advance.</p>