Данные AngularJS исчезают после обновления и возвращаются после смены страницы

Question

Я использую фабрику с сохраненными данными из запросов $ http. Моя проблема в том, что когда я перезагружаю страницу, все данные ушли (пустая таблица). Но как только я переключу свою текущую страницу (другой маршрут), данные снова возвращаются.

Что необходимо изменить для данных, отображаемых после перезагрузки страницы?

Это моя фабрика:

'use strict'; 

app.factory('dataFactory', function ($http) { 
    var dataFactory = {}; 

    $http.get("data/hiragana.json").success(function(response){ 
     dataFactory.hiragana = response; 
    }); 

    $http.get("data/katakana.json").success(function(response){ 
     dataFactory.katakana = response; 
    }); 

    return { 
     getHiraganaTable: function(){ 
      return dataFactory.hiragana; 
     }, 
     getKatakanaTable: function(){ 
      return dataFactory.katakana; 
     } 
    }; 
}); 

Это мой контроллер:

И это мое мнение:

<table class="table table-striped table-bordered" > 
    <tbody data-ng-repeat="group in hiraganaTable"> 
     <tr> 
      <td data-ng-repeat="hiragana in group.Hiragana" data-toggle="tooltip" data-original-title="{{hiragana.Romaji}}" data-container="body">{{hiragana.Symbol}}</td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

Это потому, что вы пытаетесь получить доступ асинхронный код синхронно. Метод $http возвращает обещание. Таким образом, вы могли бы попробовать что-то вроде этого:

Услуги:

'use strict'; 

app.factory('dataFactory', function ($http) { 
    return { 
     getHiraganaTable: function() { 
      return $http.get("data/hiragana.json"); 
     }, 
     getKatakanaTable: function() { 
      return $http.get("data/katakana.json"); 
     } 
    }; 
}); 

Контроллер:

'use strict'; 

app.controller('HiraganaTableCtrl', function (dataFactory, $scope) { 
    this.awesomeThings = [ 
     'HTML5 Boilerplate', 
     'AngularJS', 
     'Karma', 
     'dataFactory', 
     '$scope' 
    ]; 

    dataFactory.getHiraganaTable().then(function(res) { 
     $scope.hiraganaTable = res.data; 
    }); 
});