title: Angularjs pass data in between services that exist on different pages
body: <p>I have a simple book store example that I am working through for angularjs and I am trying to pass a book id from a home page into a service on an edit page so that the book details can be rendered.    What I have happen is I can see the rest call being hit from my <code>home' page with the correct book id being passed into the book service.  However, I cannot seem to think of a way to have the</code>BookCtrl` load that data when a different page invokes the rest service.  The order I am expecting is:  </p>
  
  <pre><code>1)  User enters a book ID to edit  
  2)  User presses Search button  
  3)  book.html page is loaded  
  4)  BookEdit service is invoked with ID from Steps 1 and 2  
  5)  ng-model for book loads data.
  </code></pre>
  
  <p>Apologies in advance, there may be some errors as I was modifying this code from a different computer, so I couldn't copy/paste<br>
  code below:</p>
  
  <p>home.html  </p>
  
  <pre><code>&lt;div ng-controller="HomeCtrl"&gt;    
       &lt;div&gt;  
            &lt;label for="query"&gt;Book to edit&lt;/label&gt;  
            &lt;input id="query" ng-model ="editBook.query"&gt;  
            &lt;button ng-click="loadBookById()"&gt;Search&lt;/button&gt;
       &lt;/div&gt;  
  &lt;/div&gt;  
  </code></pre>
  
  <p>home.js:  </p>
  
  <pre><code>var homeApp = angular.module('bookHome',['bookEdit']);  
  homeApp.controller('HomeCtrl',function($scope,$http,bookEditService)  
  {    
      $http.get('http://get/your/books/rest').success(function(data){  
         $scope.library = data;  
      });
  
      $scope.editBook = {    
        query: '',  
        service:'bookEditService'
      } ;   
  
      $scope.loadBookById = function()  
      {  
           $scope.$emit('loadBookById',{  
               query:$scope.editBook.query,  
               $service: $scope.editBook .service
      }   
  
      $scope.$on('loadBookById', function(ev,search){  
           bookEditService.loadBook({  
                bookId: $scope.editBook.query  
             },  
               $scope.searchComplete,  
               $scope.errorSearching  
             );  
          });
      $scope.searchComplete = function(results) {  
               $scope.results = results;  
        };  
  
      $scope.errorSearch= function(data,status,headers,config){  
            console.log(data);  
            // ...  
      };
  }  
  </code></pre>
  
  <p>book.html  </p>
  
  <pre><code>&lt;div ng-controller="BookCtrl" &gt;    
  
          &lt;div ng-model="details.title"&gt;&lt;/div&gt;   
          &lt;div ng-model="details.author"&gt;&lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>bookEdit.js  </p>
  
  <pre><code>  var bookEditApp = angular.module('bookEdit',[]);  
      bookEditApp.service('loadBook',function($http){   
          return{  
                 loadBookById: function(params,success,error){  
                  $http({   
                    url: 'http://path/to/book/editing',  
                    method: 'GET',  
                    params:{bookId: params.bookId}).success(function(data,status,headers,config)  
                    {  
                       var results = data;  
                       success(results || []);  
                   }).error(function(){   
                         error(arguments);  
                  });  
              }  
            };  
         });
  
  bookEditApp.controller('BookCtrl',function($scope){    
               $scope.details = {    
                title: "",  
                author: ""
               };  
   });  
  </code></pre>