ons-carousel-itemとng-repeatの挙動について

分かりづらいタイトルで申し訳ございません。
社内プロジェクトであり自宅からの投稿のため実際のソースではありませんが、ほぼ同様のソースです。
どうしても上手くいかないため質問させてください。
メインと箇所以外は省略します。

「Apache Cordova + Onsen UI + AngularJS」でアプリ開発を行っております。
メインとなるindex.htmlとその内部に表示するpage1.html、その他jsが存在しています。

indexhtml
1<body>
2<div ng-controller="indexController">
3<ons-splitter>
4    <ons-splitter-side></ons-splitter-side>
5    <ons-splitter-content id="splitter-content" page="page1.html"></ons-splitter-content>
6</ons-splitter>
7</div>
8</body>

page1html
1<ons-page ng-controller="page1Controller" ng-init="init()">
2    <ons-carousel var="carousel" initial-index="0">
3        <ons-carousel-item ng-repeat="item in items">
4        {{item.data}}
5        </ons-carousel-item>
6    </ons-carousel>
7</ons-page>

commonjs
1/* deviceready */
2document.addEventListener("deviceready", function({
3    // angularモジュールの定義とbootstrapで初期化
4    angular.bootstrap(document, "定義モジュール名");
5
6    ※１
7
8}), false);
9
10/* controller */
11(function(){
12    var module = angular.module("定義モジュール名");
13    module.controller("indexController", function($scope){
14    });
15
16    module.controller("page1Controller", function($scope){
17        $scope.init = function(){
18        }
19        $scope.items = ※２
20    });
21});

上記js内の※２にてng-repeatにてループ出力するitemsを設定する際に

$scope.items = [{data : "データ1"}, {data : "データ2"}]

のように連想配列で設定をした場合は問題なく動作します。
しかし、ここからが問題としている箇所になります。

itemsに設定するデータをxmlで管理するように変更し、※１にてxmlデータを取得してグローバル変数に値を設定する処理を記述。その後※２でグローバル変数をitemsに代入するようにしました。

var resource = [];

/* deviceready */
document.addEventListener("deviceready", function({

    // angularモジュールの定義とbootstrapで初期化
    angular.bootstrap(document, "定義モジュール名");

    // xmlよりデータを取得してグローバル変数(resource)に設定 ※１
    getXmlData();

}), false);

/* controller */
(function(){
    var module = angular.module("定義モジュール名");
    module.controller("indexController", function($scope){
    });

    module.controller("page1Controller", function($scope){
        $scope.init = function(){
        }
        // ※１で設定したGL変数(resource)を設定 ※２
        $scope.items = resource;
    });
});

上記ソースにした場合に、resourceの内容がons-carouselに表示されません。(ブランクのカルーセルが表示される。検証でのhtmlではcarousel-itemが生成されていない。)
しかしその後、ボタンイベント等でcarouselにnext()メソッド等を実行した場合に、resourceの内容が反映されます。(ブランクのカルーセルが消える。検証でのhtmlではresourceの内容でcarousel-itemが生成されている。)

※１処理後にGL変数(resource)内に正しく値が入っていることを確認済みです。

私としては、ons-splitter-contentでpageが読み込まれるタイミングやng-repeatが解決する中で、非同期処理の絡み合いによりブランクのcarousel-itemができてしまっているのかなと思っております。

いい解決方法、もしくはOnsenUIとAngularJSのビューレンダリングの流れ等をお教えいただける方。
ご教授いただければと思います。
よろしくお願いいたします。

2020/6/10
補足です。
page1controller内の何かしらの処理(clickイベント等)を実行するとカルーセルに値が入って表示されます。
ページがリロードされるため？なのか原因は不明です。