title: AngularJS: Service not returning data
body: <p>I have been trying to get data from a json file through service in AngularJS(1.5.3). I am unable to retrieve the data from json and display it in the view. I get blank values instead. Below is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Service
  
  angularStoreApp.factory('dataService', ['$http', function ($http, $q) {
  
      return {
          getProducts: function () {
              var promise = $http.get('/api/json/products.json')        
          .then(function successCallback(response) {
              if (typeof response.data === 'object') {
                  return response.data;
              } else {
                  // invalid response
                  return "Invalid data";
              }
          }, function errorCallback(response) {
              return "Invalid data";
          })
              return promise;
          }
      };
  }]);
  
  //Controller
  
  /// &lt;reference path="SearchController.js" /&gt;
  angularStoreApp.controller('SearchCtrl', ['$scope', 'dataService', function ($scope, dataService) {
        
      $scope.ProductItems = [];
     
      dataService.getProducts()
          .then(function (data) {
              $scope.ProductItems = data;
          });
  }]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;blockquote&gt;
      &lt;h4 style="color: salmon"&gt;Welcome to the New Store
      &lt;br /&gt;
          Please select the products you want and add them to your shopping cart.
      &lt;br /&gt;
          When you are done, click the shopping cart icon to review your order and checkout.
      &lt;br /&gt;
      &lt;/h4&gt;
  
  
    
  &lt;div class="row"&gt;
      &lt;div class="col-sm-12" ng-repeat="ProductItem in ProductItems track by $index"&gt;
          {{ProductItem.Name}}, {{ProductItem.Price}}
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Update: </p>
  
  <p>Below is the json data that I have. 
  <code>[{
      "itemName": "Notepad",
      "itemPrice": 12,
      "itemQuantity": 0
  },
  {
      "itemName": "Pen",
      "itemPrice": 8,
      "itemQuantity": 0
  },
  {
      "itemName": "Pencil",
      "itemPrice": 5,
      "itemQuantity": 0
  }];</code></p>
  
  <p>Could anyone help me out.</p>