angularjs - Flickity カルーセル: アイテムは ng-repeat でビューポートから押し出されますか?

Question

angulars ng-repeatを使用して、metafizzyのflickityフレームワークを使用してコンテンツを動的に表示しようとしています。

しかし、何らかの理由で、アイテムが DOM にロードされると flickity-viewport から押し出されるように見えます。なぜそれが起こるのか、それを回避する方法を知っている人はいますか?

このようにギャラリー内に静的コンテンツを表示すると、ギャラリーは正常に動作します。

HTML : 静的マークアップの例

<div ng-controller="FlickityCtrl">
   <div id="main-content" class="gallery js-gallery">
     <div class="gallery-cell"> Static Title </div>
     <div class="gallery-cell"> Static Title </div>
     <div class="gallery-cell"> Static Title </div>
  </div>

..その角度の ng-repeat ディレクティブを使用してギャラリーにデータを入力しようとすると、ギャラリーが壊れます。

HTML : NG-REPEAT を使用したマークアップ

<div ng-controller="FlickityCtrl" >
  <div id="main-content" class="gallery js-gallery">
    <div ng-repeat="chapter in chapters" ng-click="loadSubchapters(chapter.title)">
    <h1  class="gallery-cell cell-card-bg"> 
        {{ chapter.title | strip_namespace }} 
   </h1>
</div>
  </div>
  <hr>
     <button ng-click="loadChapters()" >Load chapters</button>
  <hr>
  <ul>
    <li ng-repeat="chapter in subchapters">
      {{ chapter.title | strip_namespace }}
    </li>
  </ul><br />
   <hr >
 </div>

ジャバスクリプト

angular.module('FlickityApp', [])
   .controller('flickityCtrl', ['$scope', '$timeout', function ($scope, $timeout) {

var updateUI = function(data) {
    if (!data || !data.query) { return; }
    $timeout(function() {
        $scope.chapters = data.query.pages;
        console.log(data);
    });
};

$scope.loadChapters = function() {
    mw.loader.using('mediawiki.api', function() {
        (new mw.Api()).get({
            action: 'query',
            generator: 'categorymembers',
            gcmtitle: 'Category:examplepage'
        }).done(function(data) {
            $timeout(function() {
                $scope.chapters = data && data.query ? data.query.pages : {};

            });
        });
    });
};

$scope.loadSubchapters = function(chapterTitle) {
    mw.loader.using('mediawiki.api', function() {
        (new mw.Api()).get({
            action: 'query',
            generator: 'categorymembers',
            gcmtitle: chapterTitle
        }).done(function(data) {
            $timeout(function() {
                $scope.subchapters = data && data.query ? data.query.pages : {};
            });
        });
      });
   };
}])


.filter('strip_namespace', ['$sce', function($sce){
return function(text) {
    text = text.split(":");
    return text.length > 1 ? text[1] : text[0];
   };
 }]);
.directive('flickity', [function() {
   return {
      restrict: 'E',
      templateUrl: 'templates/view.html',
      replace: true,
      scope: { chapters: '=' },
      link: function(scope, elem, attrs, ctrl) {
         scope.$watch('chapters', function() {
        elem.flickity({
        // settings
           });
         });
      }
   };
}]);
angular.element(document).ready(function() {
    angular.bootstrap(document, ['FlickityApp']);
    var flkty = new Flickity('.gallery');
});

flickity api へのリンク: http://flickity.metafizzy.co/api.htm