ネットで見かけたサンプルを使わせていただいてアプリを開発していますが、どうにも上手く表示させれないので質問させて頂きます。

どうも画面のほうが先に描画されている気がします。
アプリ起動時は何も表示できなくてpreタグで表示している配列も空なのですが。
タブバーのtestボタンをタップすると表示されます。

list.htmlはなぜかコピペできなかったので手書き、重要な箇所だけを手打ちしたので記述ミスあるかもしれないです。

どうすれば起動時から表示できるようになるでしょうか？

script.js

// アプリの設定
'use strict';

// APIの読み込み
google.load("feeds", "1");
var app = ons.bootstrap('myApp');

// 表示させる記事の数
var disp_entry_count = 10;

// 取得するサイトURL
var site = new Array();

site[0] = {
  title: 'GIZUMODO',
  url: 'http://feeds.gizmodo.jp/rss/gizmodo/index.xml',
  disp_entry: 2 // 取得する記事の数
};

site[1] = {
  title: 'Gigazin',
  url: 'http://feed.rssad.jp/rss/gigazine/rss_2.0',
  disp_entry: 3 // 取得する記事の数
};

site[2] = {
  title: 'ウェブソク',
  url: 'http://news.7zz.jp/feed',
  disp_entry: 5 // 取得する記事の数
};

// △△ここまでアプリの設定△△

function init() {

  var channel = new Array();
  var entry = new Array();
  var entries = new Array();
  var Feed = "";

  var site_count = 0;

  for (var i = 0; i < site.length; i++) {

    // 読み込むRSSを設定
    var feed = new google.feeds.Feed(site[i]['url']);
    feed.setNumEntries(site[i]['disp_entry'])
    feed.load(function(rss) {

      var hoge = setInterval(function() {

        //終了条件
        if (!rss == nil) {
          clearInterval(hoge);
          console.log("終わり");
        }
      }, 500);

      if (!rss.error) {
        // RSSからサイトの情報を配列に格納
        channel['title'] = rss.feed.title;
        channel['link'] = rss.feed.link;

        channel['description'] = rss.feed.description;
        channel['author'] = rss.feed.author;

        // RSSから記事の情報を配列に格納
        for (var j = 0; j < rss.feed.entries.length; j++) {

          var feed_entry = rss.feed.entries[j];
          var entry = {
            site_title: channel['title'],
            site_link: channel['link'],
            //  site_favicon : channel['favicon'],
            title: feed_entry.title,
            link: feed_entry.link,
            content: feed_entry.content,
            contentSnippet: feed_entry.contentSnippet,
            publishedDate: feed_entry.publishedDate
          };

          var date = new Date(entry['publishedDate']);
          entry['time'] = date.getTime();
          var yy = date.getYear();
          var mm = date.getMonth() + 1;
          var dd = date.getDate();
          if (yy < 2000) {
            yy += 1900;
          }
          if (mm < 10) {
            mm = "0" + mm;
          }
          if (dd < 10) {
            dd = "0" + dd;
          }
          entry['date'] = yy + "年" + mm + "月" + dd + "日";

          entries.push(entry);
        }
      }
      site_count++;
      if (site.length == site_count) {
        disp();
      }
    });
  }
  return entries;
}

//日付順に並べ替え
function disp() {
  entries.sort(function(b1, b2) {
    return b1.time < b2.time ? 1 : -1;
  });
}

app.controller('main', function($scope) {
  $scope.data = init();
});

list.html

<ons-list ng-controller="main">
  <ons-list-item ng-repeat="item in dara">
    <ons-row>
      <ons-col>
        <div>{{ item.site_title }}</div>
        <div>   
          <span>{{ item.title }}</span> 
        </div>
        <div>{{ item.dis }}</div>
      </ons-col>
    </ons-row>
  </ons-list-item>
</ons-list>

<!--デバッグ用-->
<ons-list-item>
  <pre>{{ data|json }}</pre>
</ons-list-item>

inedx.html





    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="js/angular/angula.js"></script>

    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">

    <link rel="stylesheet" href="css/onsenui.css">
    <link rel="stylesheet" href="css/onsen-css-components-blue-basic-theme.css">
    <link rel="stylesheet" href="css/timeline.css">
    <script type="text/javascript" src="js/onsenui.js"></script>
    <script type="text/javascript" src="js/script.js"></script>

  </head>

  <body>

    <ons-tabbar>
      <ons-tab page="list.html" active="true">
        <ons-icon icon="ion-home" class="tab-icon">test</ons-icon>
      </ons-tab>
      <ons-tab page="temp.html">
        <div class="notification reply-notification" ons-tab-inactive>4</div>
        <ons-icon icon="ion-at" class="tab-icon"></ons-icon>
      </ons-tab>
      <ons-tab page="temp.html">
        <ons-icon icon="ion-heart" class="tab-icon"></ons-icon>
      </ons-tab>
      <ons-tab page="temp.html">
        <ons-icon icon="ion-person" class="tab-icon"></ons-icon>
      </ons-tab>
    </ons-tabbar>

  </body>
</html>

画像の説明をここに入力
画像の説明をここに入力