Nested ng-repeat doesn't work in IE8

Question

I have a single page application in AngularJS 1.2.28 and I'm struggling getting it work properly in IE8.

In particular I have a problem with nested ng-repeats used to display the bigObject declared within the following MainController:

angular.module('singlePageApp')
  .controller('MainController',
    ['$scope',
    function ($scope) {
        $scope.showLittleObjectsList = false;
        $scope.bigObject = {
        objects: [
            {
                name: "NAME1",
                metadata: [

                    {index: 0, desc: "metadataQ"},
                    {index: 0, desc: "metadataF"},
                    {index: 1, desc: "metadataZ"},
                    {index: 1, desc: "metadataL"}

                ]
            },
            {
                name: "NAME2",
                metadata: [

                    {index: 0, desc: "metadataH"},
                    {index: 0, desc: "metadataX"}

                ]
            },
            {
                name: "NAME3",
                metadata: [

                    {index: 0, desc: "metadataU"},
                    {index: 1, desc: "metadataG"},
                    {index: 2, desc: "metadataS"},
                ]
            },
            {
                name: "NAME4",
                metadata: [

                    {index: 0, desc: "metadataK"},
                    {index: 1, desc: "metadataR"},
                    {index: 1, desc: "metadataW"},
                    {index: 2, desc: "metadataN"},    
                    {index: 2, desc: "metadataC"}

                ]
            }
            ]
        };
}]);

The main HTML chunk is something like this (notice that showLittleObjectsList = false; in the controller at the beginning and is used just to display the lists to the user):

<div ng-repeat="littleObject in bigObject.objects | orderBy:'name':false">
    <div>
        <button type="button" class="btn btn-default btn-sm" ng-click="showLittleObjectsList = !showLittleObjectsList">
            <span class="glyphicon glyphicon-chevron-right" ng-hide="showLittleObjectsList"></span>
            <span class="glyphicon glyphicon-chevron-down" ng-show="showLittleObjectsList"></span>
        </button>
        <span>{{littleObject.name}}</span>
    </div>
    <div ng-show="showLittleObjectsList">
        <div>
            <div ng-include="'path/to/singledata/template.html'"></div>
        </div>
    </div>
</div>

The template.html of the single data is something like this (the groupBy filter belongs to angular-filter):

<div ng-repeat="(key, metadata) in littleObject.metadata | groupBy:'index'">
    <div ng-show="$first">
        <strong>
            Metadatum desc
        </strong>
    </div>
    <div ng-repeat="metadatum in metadata">
        <div>
            {{metadatum.desc}}
        </div>
    </div>
</div>

All this code is working well in Chrome, Firefox and even IE11, giving me something like this (the former v is for caret down, because showLittleObjectsList = true;):

v NAME1
________________________________________
|   Metadata desc:                      |
|   metadataA                           |
|   metadataF                           |
|   metadataZ                           |
|   metadataL                           |
|_______________________________________|

v NAME2
________________________________________
|   Metadata desc:                      |
|   metadataH                           |
|   metadataX                           |
|_______________________________________|

v NAME3
________________________________________
|   Metadata desc:                      |
|   metadataU                           |
|   metadataG                           |
|   metadataS                           |
|_______________________________________|

v NAME4
________________________________________
|   Metadata desc:                      |
|   metadataK                           |
|   metadataR                           |
|   metadataW                           |
|   metadataN                           |
|   metadataC                           |
|_______________________________________|

Sadly in IE8 the innermost ng-repeat is sticking with the first littleObject's metadata, giving me something like this:

v NAME1
________________________________________
|   Metadata desc:                      |
|   metadataA                           |
|   metadataF                           |
|   metadataZ                           |
|   metadataL                           |
|_______________________________________|

v NAME2
________________________________________
|   Metadata desc:                      |
|   metadataA                           |
|   metadataF                           |
|   metadataZ                           |
|   metadataL                           |
|_______________________________________|

v NAME3
________________________________________
|   Metadata desc:                      |
|   metadataA                           |
|   metadataF                           |
|   metadataZ                           |
|   metadataL                           |
|_______________________________________|

v NAME4
________________________________________
|   Metadata desc:                      |
|   metadataA                           |
|   metadataF                           |
|   metadataZ                           |
|   metadataL                           |
|_______________________________________|

How can I get this working in IE8?

---

small EDIT

Struggling with this problem, I tried not to use ng-include for the singledata/template.html, instead I brutally included that partial in the main HTML which looks like this now:

<div ng-repeat="littleObject in bigObject.objects | orderBy:'name':false">
    <div>
        <button type="button" class="btn btn-default btn-sm" ng-click="showLittleObjectsList = !showLittleObjectsList">
            <span class="glyphicon glyphicon-chevron-right" ng-hide="showLittleObjectsList"></span>
            <span class="glyphicon glyphicon-chevron-down" ng-show="showLittleObjectsList"></span>
        </button>
        <span>{{littleObject.name}}</span>
    </div>
    <div ng-show="showLittleObjectsList">
        <div>
            <div ng-repeat="(key, metadata) in littleObject.metadata | groupBy:'index'">
                <div ng-show="$first">
                    <strong>
                        Metadatum desc
                    </strong>
                </div>
                <div ng-repeat="metadatum in metadata">
                    <div>
                        {{metadatum.desc}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Unfortunately this doesn't resolve the issue.

---

EDIT

An important part of the goal is to show the lists with their metadata grouped by index. I added a full controller code, and eventually I modified the metadata indexes for the grouping to make more sense.

Answer 1

I have seen something very similar occurring on mine, where I was grouping data, then using ng-repeat over that group. Sadly the only solution I found was to make my own function which returns a flattened list.

The issue (i think) is that ie-8 just isn't powerful enough to keep the repeat in scope and times out, by using a function it will only perform the calculation once and thus reduce the raw processing power needed.

Just to help, here is the grouping function I created, I have modified it so it should work with your data above, simply call the function, and do the repeat over groups instead.

         $scope.generateGroups = function(littleObject) {
            $scope.groups = [];
            var options = [];
            littleObject.metadata.forEach(function (item, index) {
                    var groupIndex = $.inArray(item['index'], options);
                    if (groupIndex >= 0) {
                        $scope.groups[groupIndex].push(item);
                    } else {
                        options.push(item['index']);
                        var test =  [item];
                        $scope.groups.push(test);
                    }
            });
            $scope.apply();
        }

Answer 2

Im not sure exactly but faced similar type of problem in one of my previous project where 'track by' in ng-repeat fixed issue. Please check by adding

(key, metadata) in littleObject.metadata | groupBy:'index' track by $index

Hope this will fix your issue.