Angular js resource call to get json data in array

Created factory that will return json data and calling it from controller, but it is coming empty. don't know where I made mistake. no console error and in network json is also loading.

    'use strict';
var app = angular.module('angularJson', ['ngResource']);

    app.factory('loadJsonService', ['$resource', function ($resource) {
        return {
            getData: function () {
                return $resource('json/productDetails.json');
            }
        };
    }])

  app.controller('angularJsonCtrl',['$scope', 'loadJsonService',function($scope, loadJsonService){

    $scope.loadProducts = function(noOfData){
        $scope.productDetails = [];
        $scope.productDetails = loadJsonService.getData().query();
    }

  }]);

You have to put wait till request gets completed & there after you need to use .$promise.then over $resource.query function call. So that you could put function which will get call on success of API call.

loadJsonService.getData().query().$promise.then(function(res){ //success function
   $scope.productDetails = res;
}, function(error){ //error function
   console.log(error);
})