ng-repeat не повторяется

Question

У меня есть небольшая проблема с ng-repeat.
У меня есть json-файл, где находятся данные, которые я пытаюсь отобразить.
Я написал небольшое обслуживание для обмена данными. У этого есть некоторые методы, чтобы установить и получить информацию, но, когда я пытаюсь использовать эти методы в моем контроллере, чтобы сохранить результат в переменной (той, которую я пытаюсь повторить), это похоже на пустое, но, когда я распечатать переменную, распечатать результат.
Вот мой подход.

HTML

<ul class="list-unstyled products-list"> 
    <li class="col-sm-6 col-md-3 product" ng-repeat="product in products"> 
     <article> 
     <img ng-src="{{ product.img }}" class="img-responsive" alt=""> 
     <div class="short-product-detail text-center"> 
      <p class="name">{{ product.name }}</p> 
      <span class="price">{{ product.price }}</span> 
     </div> 
     <a href="javascript:void(0);" class="add-to-cart text-center">add to cart</a> 
     </article> 
    </li> 
</ul> 

контроллер

angular.module("Store") 
    .controller("ProductsCtrl", ["$scope", "productsService", function ProductsCtrl($scope, productsService) { 
     $scope.products = []; 
     productsService.fetchProducts() 
      .then(function(response) { 
       productsService.setProducts(response.data.products); 
       $scope.products = productsService.getProducts(); 
       console.log($scope.products) 
      }) 
    }]) 

сервис

angular.module("Store") 
    .service("productsService", ["api", "$http", function (api, $http) { 
     var productsList = []; 
     var categories = []; 


     var getProducts = function() { 
      return productsList; 
     }; 

     var setProducts = function(products) { 
      productsList.push(products); 
     }; 

     var getCategories = function() { 
      return categories; 
     }; 

     var setCategories = function(categories) { 
      categories.push(categories); 
     } 

     var fetchProducts = function() { 
      return $http({ 
       method: "GET", 
       url: api.url 
      }); 
     } 

     return { 
      fetchProducts: fetchProducts, 
      getProducts: getProducts, 
      setProducts: setProducts, 
      getCategories: getCategories, 
      setCategories: setCategories 
     } 
    }]) 

main.js

angular.module("Store", ["ui.router"]) 
    .constant("api", { 
     url: "data.json" 
    }) 
    .config(function config($stateProvider, $urlRouterProvider) { 
     $urlRouterProvider.otherwise('/'); 
     // Set up the states 
     $stateProvider 
      .state("products", { 
       url: "/", 
       views: { 
        "": { 
         templateUrl: "./templates/products.html", 
         controller: "ProductsCtrl" 
        } 
       } 
      }) 
    }) 

Пожалуйста, дайте мне знать, что я делаю неправильно.
Заранее спасибо ребят

Answer 1

Проблемы с вашей конфигурацией, изменить его, как этот

$stateProvider 
    .state('products', { 
    url: '/products', 
    templateUrl: './templates/products.html', 
    controller: 'ProductsCtrl' 
    })