Date filter causes ng-repeat+other filters to be extremely slow in IE11

Question

I have an ng-repeat plus some custom filters, and a date range filter, all works wonderful in Chrome, Mozilla, android. But in IE with the Date Range filter everything grinds to a halt. The filters take 10 seconds to register (I have filters tied to checkboxes and free text), with the checkbox animations also lagging until the data loads. If I remove the date range filter then everything is fine in IE.

The list is called from an azure API, the list is currently 8500 records long, but the length can't be avoided, and all runs smooths with the size apart from IE and the date range function.

I've tried something to speed it up in IE such as adding :: single binding to all {{ }} values.

I am also using pagination and have LimitTo set to 20

But these fixes seem to be if ng-repeat and filters are slow in IE8+ in general, but mine is fine with the other filters its only with the date range.

The repeat:

<div class="inner" ng-repeat="app in displayedData = ( applications
                                                    | orderBy:       sortType:sortReverse 
                                                    | filter:        FAl
                                                    | filterStatus:  FStatus
                                                    | filterStage:    FStage
                                                    | dateRange:     startDate:endDate
                                                  ) | start: (currentPage - 1) * perPage |  limitTo: perPage">
<div class="record" ng-class-odd="'odd odd-Record'" ng-class-even="'even even-Record'" data-toggle="collapse" data-target="#{{ app.Id }}">
    <div class="field field-Name">{{ app.Lastname }}</div>
    <div class="field field-AccountNumber">{{ app.AccountNumber }}</div>
    <div class="field field-AppDate">{{ app.DateApplied | date : "dd/MM/yyyy"}}</div>        
</div>

The date range filter:

//Filter: Dates
App.filter('dateRange', function () {
  return function (applications, startDate, endDate) {
    var filtered = [];
    var start_date = startDate.toString();
    var end_date   = endDate.toString(); 

    angular.forEach(applications, function (value) {            
        if (Date.parse(value.DateApplied) > Date.parse(start_date) && Date.parse(value.DateApplied) < Date.parse(end_date)) {
            filtered.push(value);
        }
    });
    return filtered;
  };
});

The values for the date range are sent from pikaday date picker:

<h4>Date Range</h4>
<div>
    <label style="font-weight: 500">Start Date</label>
    <input style="float: right; width: 128px;" type="text" id="datepickerStartDate" ng-model="startDate">
 </div>
 <div>
     <label style="float: left; font-weight: 500">End Date</label>
     <input style="float: right; width: 128px;" type="text" id="datepickerEndDate" ng-model="endDate">
 </div>

The other filters are all in the below format just passed different specific field values.

//Filter: Status
App.filter('filterStatus', function () {
    return function (applications, Status) {
        var items = {
            status: Status,
            out: []
        };
        angular.forEach(applications, function (value, key) {
            if (this.status[value.Status] === true) {
                this.out.push(value);
            }
        }, items);
        return items.out;
    };
});

Answer 1

Issue was cased by having an && criteria in the date range function if statement

Trouble shooting through it, I found having having only one thing to check for in the IF stopped all slowness.

I instead created a filter for start and end date separately

App.filter('startDate', function () {
    return function (applications, startDate) {
        var items = {
            startdate: startDate,
            out: []
        };
        angular.forEach(applications, function (value, key) {
            if (Date.parse(value.DateApplied) > Date.parse(this.startdate)) {
                this.out.push(value);
            }
        }, items);
        return items.out;
    };
});
App.filter('endDate', function () {
    return function (applications, endDate) {
        var items = {
            enddate: endDate,
            out: []
        };
        angular.forEach(applications, function (value, key) {
            if (Date.parse(value.DateApplied) < Date.parse(this.enddate)) {
                this.out.push(value);
            }
        }, items);
        return items.out;
    };
});

This has fixed the immense slowness experienced in IE. I am sadly unsure why this was causing an issue.