title: How do I retrieve data using an AngularJS factory?
body: <p>I am having a problem displaying product information from the database using an AngularJS
  factory. Basically its a shopping cart application that I modified to display the products from the database instead of a hard coded array.</p>
  
  <p>Heres the main application file source code (app.js) :</p>
  
  <pre><code>'use strict';
  
  var shop = angular.module('shop', []);
  
  // create a data service that provides a store and a shopping cart that
  // will be shared by all views (instead of creating fresh ones for each view)
  shop.factory("DataService",['$http', function($http) {
      // create store
      var myStore = new store($http);
  
      // return data object with store and cart
      return {
         store: myStore
         //cart: myCart ignore for now
      }
  }]);
  
  // adding the config on the module
  shop.config(function($routeProvider) {
        $routeProvider // angular object, injected dynamically
          .when('/', // we show the store on the root
            {
              controller: 'StoreController',
              templateUrl: 'partials/store.htm'
            })
          .when('/cart',
            {
              controller: 'CartController',
              templateUrl: 'partials/cart.htm'
            })
          .when('/checkout',
            {
              controller: 'CheckoutController',
              templateUrl: 'partials/checkout.htm'
            })
         .when('/invoice',
            {
              controller: 'InvoiceController',
              templateUrl: 'partials/invoice.htm'
            })
         .otherwise({ redirectTo: '/' }); // store
      });
  
  var controllers = {};
  controllers.StoreController = function($scope, $routeParams, DataService) {
    $scope.store = DataService.store;
    console.log($scope.store);
    //$scope.cart = DataService.cart;
  }
  </code></pre>
  
  <p>The store source code (store.js) where I retrieve the data :</p>
  
  <pre><code>function store($http) {
    this.products = [];
    this.url = 'php/db.php';
    this.fields = [
      'product_id',
      'product_name', 
      'product_description', 
      'product_price'
    ];
    this.products = this.getProducts($http);
  }
  
  store.prototype.getProducts = function($http) {
    $http.post(this.url, { "action" : 'products', "fields" : this.fields })
      .success(function(data, status) {
        //$scope.result = data; // Show result from server in our &lt;pre&gt;&lt;/pre&gt; element
        //return data;
        this.products = data;
      })
      .error(function(data, status) {
        //return data || "Request failed";
        //this.status = status;        
        this.products = [];
    }); 
  }
  
  store.prototype.getProduct = function (sku) {
    for (var i = 0; i &lt; this.products.length; i++) {
      if (this.products[i].sku == sku)
        return this.products[i];
    }
    return null;
  }
  </code></pre>
  
  <p>Can anybody tell me what am I doing wrong here?</p>
  
  <ul>
  <li>Why cant I set my this.product variable to the database result?</li>
  <li>I would also like to extend the products class with more functions to save items
  to the database, how would I go about doing that?</li>
  </ul>
  
  <p>Any advice much appreciated.</p>
  
  <p>Regards</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I have added the app.js code below, I am having an issue with the controller (StoreController) when accessing the data from the store class (store.js).
  It still shows an empty array. I have changed my code as suggested by m.e.conroy.</p>
  
  <p>app.js</p>
  
  <pre><code>'use strict';
  
  var shop = angular.module('shop', []);
  
  
  shop.factory("DataService",['$http', '$q', function($http, $q) {
      // create store
      var myStore = new store($http, $q);
      return {
         store: myStore      
      }
  }]);
  
  
  // adding the config on the module
  shop.config(function($routeProvider) {
        $routeProvider // angular object, injected dynamically
          .when('/', // we show the store on the root
            {
              controller: 'StoreController',
              templateUrl: 'partials/store.htm'
            })
          .when('/cart',
            {
              controller: 'CartController',
              templateUrl: 'partials/cart.htm'
            })
          .when('/checkout',
            {
              controller: 'CheckoutController',
              templateUrl: 'partials/checkout.htm'
            })
         .when('/invoice',
            {
              controller: 'InvoiceController',
              templateUrl: 'partials/invoice.htm'
            })
         .otherwise({ redirectTo: '/' }); // store
      });
  
  var controllers = {};
  controllers.StoreController = function($scope, $http, $routeParams, DataService) {
    $scope.store = DataService.store;              
  }
  
  shop.controller(controllers); 
  </code></pre>