ng-repeat doesn't work on device

[webcircles-fabri]

Hi, I'm using angular, framework7 and phonegap. I followed the video tutorial step by step but I can't manage to get ng-repeat working on iOS, even if on chrome works fine. If I load JSON data from an external URL it works only on my notebook but not on the phone. On the other hand, if I load JSON data from a local .json file it works fine both on the phone and on the notebook. Here's the code I'm using: [DataService.js]:

Unimib.angular.factory('DataService', ['$document', '$http', function ($document, $http) {
  'use strict';

  var pub = {};

  pub.getNews = function () {
    return $http.get("news.json");
  };

  return pub;

}]);

[IndexPageController.js]:

Unimib.angular.controller('IndexPageController', ['$scope', '$http', 'InitService', 'DataService', 
  function ($scope, $http, InitService, DataService) {
    'use strict';

    InitService.addEventListener('ready', function () {
      DataService.getNews().then(function (result) {
        $scope.news = result.data;
      }, function (err) {
        console.log(err);
      });
    });  
}]);

[index.html]

<!-- Page 1 -->
          <div data-page="index" class="page" ng-controller="IndexPageController">
            <!-- Page content-->
            <div class="page-content">
              <div class="content-block-title">Ultime news</div>
              <div class="list-block media-list">
                <ul>
                  <li ng-repeat="newsItem in news">
                    <a href="#" class="item-link item-content">
                      <div class="item-media"></div>
                      <div class="item-inner">
                        <div class="item-title-row">
                          <div class="item-title">{{newsItem.title}}</div>
                        </div>
                        <div class="item-subtitle">{{newsItem.subtitle}}</div>
                        <div class="item-text">{{newsItem.body.und[0].summary}}</div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>

I see no errors on the Chrome console, even if I load the JSON data from an external URL. I've seen a similar issue here but it has been closed without the reporter's solution. Any help would be appreciated :) :) Thanks!

[webcircles-fabri]

Seems to work now! I've defined: $scope.news = {}; outside the InitService.addEventListener(... block.

Unimib.angular.controller('IndexPageController', ['$scope', '$http', 'InitService', 'DataService', 
  function ($scope, $http, InitService, DataService) {
    'use strict';

    $scope.news = {};

    InitService.addEventListener('ready', function () {
      DataService.getNews().then(function (result) {
        $scope.news = result.data;
        console.log(result.data);
      }, function (err) {
        console.log(err);
      });
    });

    $scope.numeric = function(input) {
      return parseInt(input+"000");
    };

    $scope.objToArray = function(obj) {
      return Object.keys(obj).map(function(key) {
        return obj[key];
      });
    }
}]);

I hope it may be useful for other developers facing the same problem!

[valnub]

Yes, "ready" is not an event fired by angular, so you either have to call $.apply() afterwards or move your code outside the listener.