ng-repeat is not iterating

Question

I have a little problem with ng-repeat.
I have a json file where is the data that I'm trying to display.
I wrote a little service to share the data. It has some methods to set and get the information but, when I try to use that methods in my controller to store the result in a variable (the one that I'm trying to iterate) it is like is were empty but, when I print the variable, print the result.
Here s my approach.

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>

controller

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)
            })
    }])

service

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"
                    }
                }
            })
    })

Please, let me know what I'm doing wrong.
Thanks in advance guys

Answer 1

Problem is with your config, Change it like this

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