Material Design Lite table refresh issue with AngularJS

Question

I am using mdl-data-table mdl-js-data-table and ng-repeat to implement a simple pagination feature. It works, but has an annoying issue: whenever I turn a page, the table flashes. e.g. if the table has 20 rows and each page has 10, mdl table will first display 20 then within tenth of a second, shrink that into 10 rows.

If I remove class mdl-data-table mdl-js-data-table and just use table, everything works fine, no flash at all. But I lost MDL style of course.

I wonder if both angular and MDL updates DOM, and somehow MDL update the table twice. But I don't know where to look at to fix it. calling mdl window.componentHandler.upgradeAllRegistered(); doesn't seem matter one way or the other.

Please help. Thanks.

part of the code is as below. initData function just sets the initial value for pagination variables and data array.

<div ng-init="initData()"></div>
<table class="mdl-data-table mdl-js-data-table mdl-data-table__cell--non-numeric">
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="n in datalists | pagination: curPage * pageSize | limitTo: pageSize" ng-controller="VhlCtrl">
            <td>{{$index}}</td>
        </tr>
    </tbody>
    <button class="mdl-button mdl-js-button mdl-button--icon mdl-button" ng-disabled="curPage == 0" ng-click="curPage=curPage-1">
        <i class="material-icons">skip_previous</i>
    </button>
    Page {{curPage + 1}} of {{ numberOfPages() }}
    <button class="mdl-button mdl-js-button mdl-button--icon mdl-button" ng-disabled="curPage >= datalists.length/pageSize - 1" ng-click="curPage = curPage+1">
        <i class="material-icons">skip_next</i>
    </button>
</table>

Answer 1

MDL is for static websites and not for webapps.

consider using Angular Material