IE11 slow / freeze with AngularJS's ng-repeat rendering

Question

Currently I have a very sublte problem to solve with IE11 and AngularJS.

My page consists of two nested ng-repeat to create a tabset with a table inside any tab.

Here the code: http://pastebin.com/0fffPz5Z

In the code, each application's object have around 1.000 item's related objects. With a Chrome, Safari and Mozilla I have no problem, all is superfast! With IE11 the page go slow and IE11 show me the message of a too slow page's script....

I've created an IE11 interface's profiling with this result: https://www.dropbox.com/s/y5xuystxht6gjkr/IE11-interface-profiling.png?dl=0

Is this another IE11's bug??? Sorry for my English and thanks in advance for any suggestion.

Edit: Currently (for "debug" purpose) I removed all td's content... the IE11 is still too slow. :(

                <tabset ng-show="!applicationsLoading">
                <tab ng-repeat="application in applications track by application.name">
                    <tab-heading>
                        <em class="fa fa-clock-o fa-fw"></em> {{ application.name }}
                    </tab-heading>
                    <div>
                        <!-- START table responsive-->
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover table-striped">
                                <thead>
                                <tr>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr ng-repeat="item in application.items track by item.itemid">
                                    <td></td>
                                    <td></td>
                                    <td>
                                    </td>
                                    <td></td>
                                    <td></td>
                                    <td>
                                    </td>
                                    <!-- Graph or History column -->
                                    <td>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- END table responsive-->
                    </div>
                </tab>
            </tabset>

Answer 1

AngularJs has limits for rendering bindings per page (In some articles you can find that it is around 2000 bindings). Currently you've just faced this situation. The reason why chrome and Mozilla work smoothly is that DOM operations for them are optimized better. In order to improve your performance try to:

• avoid using sort in ng-repeat (sort it before insertions)
• Use one-time bindings (:: syntax)
• Remove unnecessary watches
• Optimize digest cycles
• Use pagination
• Replace angularjs ng-repeat with ReactJs components (in case of really big amount of data)

Answer 2

Just ran into this same problem. Had everything working perfectly on Chrome, then tested in IE and it kept crashing with anything over 1000 records.

I ended up following this link to add a "lazy load" or "infinite scroll" to my table. So on table load it still pulls all 1000+ records, but instead of loading this data directly into the table, I load it into a big array, then just subset my table of say 50 records. Then create a directive that listens to the scroll on the table, and when it's near the bottom then fire off a function which just adds the next 50 records from the big array into my table array. Here's a direct link to the fiddle from the link above.

HTML

<tbody when-scroll-ends="loadMoreRecords()">
    <tr ng-repeat="row in tableData">
        <td>{{row.attribute}}</td>
    </tr>
</tbody>

Module

angular.module(myApp, []).directive('whenScrollEnds', function () {
    return {
        restrict: "A",
        link: function (scope, element, attrs) {
            var processingScroll = false;

            var visibleHeight = element.height();
            var threshold = 200;

            element.scroll(function () {
                var scrollableHeight = element.prop('scrollHeight');
                var hiddenContentHeight = scrollableHeight - visibleHeight;

                if (hiddenContentHeight - element.scrollTop() <= threshold) {
                    // Scroll is almost at the bottom. Loading more rows
                    scope.$apply(attrs.whenScrollEnds);
                }
            });
        }
    };
});

Controller

function loadTableData() {
    LoadDataService().getData().then(function(response) {
        fullTableList = response.data;
        $scope.tableData = fullTableList.slice(0,50);
    });
}

function loadMoreRecords() {
    // if there's still more than 20 records left, add the next chunk of 20
    if (fullTableList.length - $scope.tableData.length > 20) {
        $scope.tableData = $scope.tableData.concat(fullTableList.slice($scope.tableData.length,$scope.tableData.length + 20));
    } else {
        while ($scope.tableData.length < fullTableList.length) {
            $scope.tableData.push(fullTableList[$scope.tableData.length]);
        }
    }
}