AngularJSの$resourceで取得した値を変数に格納する方法

お世話になります。
AngularJS1.5.8にて開発を行っておりますが、どうしてもわからないことがありましたのでみなさまの知識をお借りできればと思い質問させていただきます。

【実現したいこと】
都道府県のマスターデータをJSON形式で作成して、このデータを読み込むServiceを作ってControllerから値を参照したい

【試してみた方法】
① 都道府県のマスターデータを以下のようにJSONで作成しました。

json
1/** pref.json **/
2{
3    "1": "北海道",
4    "2": "青森県",
5    "3": "岩手県",
6    "4": "宮城県",
7    "5": "秋田県",
8}

② マスターデータを読み込むサービスを作成しました

javascript
1module.service('MasterDataService', function ($resource) {
2    this.pref = $resource('asset/masterdata/pref.json').get().$promise.then(function(data){
3        return data;
4    })
5});
6
7    //Controllerから MasterDataService.pref で都道府県データを取得したい
8

③ ControllerからServiceを読み込んで都道府県データが使えるか確認しました

javascript
1module.controller('AppController', function (MasterDataService, $scope) {
2    this.masterdata = [];
3    this.masterdata["pref"] = MasterDataService.pref;
4
5    console.log(this.masterdata);
6    //結果>>Promise {$$state: {…}}
7});
8

【試した結果】
上記のコードで試してみたのですが、うまく都道府県データを取得して変数に入れることができませんでした。
なにか、実現できる方法はございませんでしょうか？

みなさまのお知恵をお貸しいただければ幸いでございます。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

動作リンク

<html>
  <head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.5.8/angular-resource.js"></script>
  <script>
    var module = angular.module('appName', ['ngResource']);
    module.service('MasterDataService', function ($resource, $timeout, $q) {
      // old
      this.pref = $resource('./pref.json').get().$promise.then(function(data){
        return data;
      });
      
      // new
      this.pref2 = function(){
        return $resource('./pref.json').get().$promise;
      };
      
    });
    
    module.controller('AppController', function(MasterDataService, $scope) {

      //old
      this.masterdata = [];
      this.masterdata["pref"] = MasterDataService.pref;
      console.log(this.masterdata);

      // new
      var self = this;
      self.masterdata2 = [];
      MasterDataService.pref2().then(function(ret){
        self.masterdata2["pref"] = ret;
        console.log(self.masterdata2);
      });
      
      // 画面から呼び出し
      $scope.pref2 = function(){
        return self.masterdata2["pref"];
      }

    });
    
  </script>
  </head>
  <body>
    <div ng-app="appName" ng-controller="AppController">
      <ul>
        <li ng-repeat="d in pref2()">{{d}}</li>
      </ul>
    </div>
  </body>
</html>

投稿2017/09/14 01:52

編集2017/09/14 01:54