title: AngularJS - Using an external Factory for a $http GET Request - How to return the result properly?
body: <p>After a few tries, I am now able to access the external service factory (was told it's a good practise to decentralise it) to retrieve product data and display them in my view.</p>
  
  <p>At the moment I am passing the <code>$scope</code> to the function, which seems kind of ugly (especially if you add further CRUD methods).</p>
  
  <p>Is there a better / more appropriate way to achieve this?</p>
  
  <p>Thanks in advance.</p>
  
  <p>At the moment I use it as seen below (which is working):</p>
  
  <h2><strong>services.js</strong></h2>
  
  <pre><code>angular.module('services', [])
  .constant("baseDataUrl", "http://localhost:55451/api/")
  .factory('sportsstoreService', function ($http, baseDataUrl) {
  
      var serviceApi = {};
  
      serviceApi.getProducts = function ($scope) {
           $http({ method: 'GET', url: baseDataUrl + 'product' }).
           success(function (data, status, headers, config) {
                $scope.data.products = data;
           }).
           error(function (data, status, headers, config) {
               // called asynchronously if an error occurs
               // or server returns response with an error status.
           });
      };
  
      return serviceApi;        
  });
  </code></pre>
  
  <h2><strong>sportsstore.js</strong></h2>
  
  <pre><code>angular.module("sportsStore")
      .controller("sportsStoreCtrl", function ($scope, sportsstoreService) {
  
          $scope.data = {};
  
          sportsstoreService.getProducts($scope);
  
  });
  </code></pre>