title: Angular service: value lost when view changes
body: <p>I'm trying to build a simple Angular app that pulls in data from Instagram. The user enters a hashtag on the index page and then is presented to another page where posts with that hashtag are displayed.</p>
  
  <p>I've tried passing the hashtag that's used as a variable in a service, but when the view is changed the value is overwritten. (I can check the value right after I set it and it's set, but as soon as the page changes I lose the value).</p>
  
  <p>Here's my service:</p>
  
  <pre><code>var instagramApp = angular.module('instagramApp')
  .factory('feedData', function($rootScope) {
      var config = {};
      return {
          setHashtag: function (x) {
                  config.hashtag = x;
          },
          getHashtag: function () {
              return config.hashtag;
          }
      }
  });
  </code></pre>
  
  <p>And my two controllers:</p>
  
  <p>Sets hashtag (the /index.html view):</p>
  
  <pre><code>instagramApp.controller('indexController', ['$scope', 'feedData', '$window',
  function($scope, feedData, $window){
  
  $scope.generate = function(){
      feedData.setHashtag('marcheet');
      console.log(feedData.getHashtag());
      $window.location.href = '/results.html';
  };
  
  }]);
  </code></pre>
  
  <p>Gets hashtag (the /results.html view):</p>
  
  <pre><code>instagramApp.controller('instagramController', ['$scope', 'Instagram', '$http', 'feedData',
  function($scope, Instagram, $http, feedData){
  
      feedUrl = '/feed/?hashtag=' + feedData.getHashtag() +'&amp;count=20';
      console.log(feedUrl);
      createStoryJS({
        type:       'timeline',
        width:      '800',
        height:     '600',
        source:     feedUrl,
        embed_id:   'my-timeline'
      });
  }
  ]);
  </code></pre>