Получить данные из ngResource и затем связать результат для просмотра

Question

Я работаю над проектом AngularJS. Я сейчас использую ngResource для получения данных json из статического файла (возможно, позже буду использовать db).

А затем я использую контроллер для вызова службы с помощью get(). Я хотел бы связать данные в функции обратного вызова с переменной $scope (gridData) в контроллере. Тем не менее, это не удалось и отображается как неопределенное. Какие-либо предложения? Данные json довольно просты, просто используйте массив с 0-10 в качестве идентификаторов, если вы хотите протестировать с помощью jsbin/plunker/ любого другого онлайн-редактора.

контроллер:

'use strict';

var gridCtrl = appCtrl.controller('ctrl', function ($scope, dbService) {
    $scope.gridData = [];

    dbService.get(function (data) {
        $scope.gridData = data;
        console.log(data.jsondb);
    });
});

DATASERVICE:

'use strict';

angular.module('app.services', ['ngResource'])
    .factory('dbService', function ($resource) {
        return $resource("/js/datafile/db.json");
});

Просмотр HTML:

<div ng-controller="ctrl">
    <div ng-repeat="character in $scope.gridData">
        {{character.id}}
    </div>
</div>

Answer 1

Это не верно: <div ng-repeat="character in $scope.gridData">

Так должно быть:

<div ng-controller="ctrl">
    <div ng-repeat="character in gridData">
        {{character.id}}
    </div>
</div>