title: AngularJS Load Data from Service
body: <p>I am having a problem getting data from a service populated into my view. I have a service defined as such</p>
  
  <pre><code>app.factory('nukeService', function($rootScope, $http) {
      var nukeService = {};
  
      nukeService.nuke = {};
  
      //Gets the list of nuclear weapons
      nukeService.getNukes = function() {
          $http.get('nukes/nukes.json')
              .success(function(data) {
                  nukeService.nukes = data;
              });
  
          return nukeService.nukes;
      };
  
      return nukeService;
  });
  </code></pre>
  
  <p>and my controller</p>
  
  <pre><code>function NavigationCtrl($scope, $http, nukeService){
  
  
  
      /*$http.get('nukes/nukes.json').success(function(data) {
          $scope.nukes = data;
      });*/
  
      $scope.nukes = nukeService.getNukes();
  
  }
  </code></pre>
  
  <p>If I use the $http.get from the controller the data populates fine, however, if I try to call the data from the service, I get nothing. I understand that the query is asynchronous but I am having a hard time understanding how to populate the $scope variable once the data is returned. I could use $rootscope to broadcast an event and listen for it in the controller but this does not seem like the correct way to accomplish this. I would really appreciate any advice on how to do this the correct way. </p>