How can I get an object with a collection using Angular-Resource call an API

Question

How can I get an object that have a collection of it using $resource service.

I created a service to call the API end-point. The service is returning the JSON data with this format. but Angular is never filling the $scope with data. I added here the service the controller and how I am using it. I have a very similar service that is working but the API is returning the collection where for this API was is being returned is an object with a collection.

JSON

{
    "Url": "http://localhost:52882/api/metrics",
    "MetricsCount": 10,
    "Metrics": [{
        "Url": "http://localhost:52882/api/metrics/1",
        "Id": 1,
        "Name": "3DRange",
        "Description": "3-D range from shooter to target at time of launch",
        "Unit": "Feet"
    }]
}

SERVICE

(function () {
    var metricRepository = function ($resource) {

        var getMetricsFunc = function () {
            var apiUri = "http://localhost:52882/api/metrics";
            return $resource(apiUri).get();

        };

        return {
            getMetrics: getMetricsFunc
        };
    };

    var module = angular.module("dataCollectModule");
    module.factory('metricRepository', metricRepository);
}());

CONTROLLER
'use strict';

(function () {


    var DataCollectionSetupController = function ($scope, metricRepository, participantRepository) {

        $scope.groupId = 1;

        $scope.metrics = metricRepository.getMetrics();

        $scope.metricscount= metricRepository.getMetrics().MetricsCount;

    }

    var app = angular.module("dataCollectModule");
    app.controller("DataCollectionSetupController", DataCollectionSetupController);


}());



HTML Use fragment

 <td> 
 {{metricscount}}
      <select id="metricSelector" style="width: 100%;">
         <option ng-repeat="metric in metrics" value="{{metric.Id}}">{{metric.Name}}</option>
      </select>
 </td>

Answer 1

Please see working demo here http://plnkr.co/edit/xdkp0Qk0cjcvWaTULbXy?p=preview

make sure : 1. Yo've got reference to angular-resource.js

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-resource.js"></script>

2.Inject ngResource into your dataCollectModule

var app = angular.module('dataCollectModule', ['ngResource']);

3.In your HTML change ng-repeat="metric in metrics" to ng-repeat="metric in metrics.Metrics"

<option ng-repeat="metric in metrics.Metrics" value="{{metric.Id}}">{{metric.Name}}</option>