Lungo + Angular = broken updates

by otupman

HTML

<link rel="stylesheet" href="http://lungo.tapquo.com/example/components/lungo/lungo.css">
<link rel="stylesheet" href="http://lungo.tapquo.com/example/components/lungo/lungo.icon.css">
<link rel="stylesheet" href="http://lungo.tapquo.com/example/components/lungo/lungo.icon.brand.css">
<link rel="stylesheet" href="http://lungo.tapquo.com/example/components/lungo/theme.lungo.css">
<script src="http://lungo.tapquo.com/example/components/quojs/quo.js"></script>
<script src="https://dl.dropboxusercontent.com/u/50968026/lungo-angular-bridge.js"></script>
<script src="https://dl.dropboxusercontent.com/u/50968026/lungo.js"></script>
<section id="main" data-transition="slide"> 
    <header data-title="JsFiddle Lungo">
    </header>
    <article class="active scroll" id="first_article" ng-controller="FunWithClassesCtrl">
        <p>Hit generate, then generate again</p>
        <button ng-click="generateItems()">Generate</button>
        <ul>
            <li ng-repeat="item in items">{{item}}</li>
        </ul>
    </article>
    
</section>

JavaScript

angular.module('myApp', ['Centralway.lungo-angular-bridge']);

function FunWithClassesCtrl($scope) {
    $scope.items = [];
    $scope.clicks = 0;
    $scope.generateItems = function() {
        setTimeout(function() { 
            $scope.clicks++;
            for(var i = 0; i < 50; i++) {
                $scope.items.push('Item ' + $scope.clicks + '.' + i);
            }
            $scope.$apply();
        }, 100);
    };

}