AngularJS not displaying array from rest call when loading view - angularjs

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