AngularJS not displaying array from rest call when loading view

Question

I am new to angularJS and may be missing something small but I have a spring boot backend providing a rest api for angular front end. I am using ngResourse in my factory and this appears to work fine. The problem is when I load the view, my array of items is not displayed, what confuses me more is that I made a function to load the same data again in my controller and the view displays the details then. I have included the code that's relevant.

Here is my factory:

angular.module('myApp.products.module')

.factory('productsFactory', ['$resource', function($resource) {
    return $resource('http://localhost:8080/product/findall/:id', {id : '@id'});
  }])

Here is Controller (as vm):

angular.module('myApp.products.module')
.controller('productsCtrl', [
  '$rootScope', '$log', '$state', '$timeout', '$location', '$mdDialog', '$resource', 'productsFactory',

  function ($rootScope, $log, $state, 
            $timeout, $location, $mdDialog, $resource, productsFactory) {

    var scope = this;

    var init = function () {
        scope.products = productsFactory.query();
        scope.test(1);
    };

    scope.test = function(productId) {
        scope.oneProduct = productsFactory.get({id: productId});
        scope.products = productsFactory.query(/*console.log*/);
    };

    init();
}])

Here is Html:

<div layout="column" ng-cloak>
<div layout="column">
    <div>
        <md-button class="md-no-focus" ng-click="vm.test(2)">test</md-button>
         Test Result: {{ vm.oneProduct }}
    </div>

    <div>
        <ul ng-repeat="prod in vm.products">
            <li> {{ prod.id }}</li>
            <li> {{ prod.name }}</li>
        </ul>
    </div>
</div>

When the view loads the oneProduct shows up fine. The list items show nothing, but when I press the test button and load call the query again they all show up. Any help would be greatly received.

Thanks.

Answer 1

Looks like you are trying to use one method for two different queries, you said 'findall' but at the same time you need to send an ID. I think the best idea is split this method.

//Inject the new service before to use it.
 scope.test = function(productId) {
        scope.oneProduct = productByIdFactory.get({id: productId});
        scope.products = productsFactory.query(/*console.log*/);
 };
// Get all products
.factory('productsFactory', ['$resource', function($resource) {
    return $resource('http://localhost:8080/product/findall', {
        listAllProducts: {
            method: "GET",
            isArray: true
        });
  }])
// Get product by id
.factory('productByIdFactory', ['$resource', function($resource) {
    return $resource('http://localhost:8080/product/findById/:id', {
        listProduct: {
            method: "GET",
            params: {id: "@productId"},
            isArray: false
        });
  }])