OrderBy is sorting differently in Chrome than other browsers

Question

I noticed that orderBy in Chrome is not sorting the same as it is in other browsers.

I am writing for a project in Angular 1.3.

Chrome sorting:

IE 10 sorting:

There is no special logic regarding specific browsers and both arrays are EXACTLY the same.

The predicate is explicitly defined:

$scope.predicate = 'style';
$scope.reverse = true;

My ng-repeat looks like this:

<tr ng-repeat="line in model.resultList | orderBy:predicate:reverse">

There's nothing special or different with my code. The 'sizes', however, are strings (e.g. size: '8-', ..., size: '6',...). Why is this sorting entirely differently on Chrome than on every other browser?

All of my results are coming in sorted from the back end in groups of style # and then ascending sizes. When the primary sort is set on Angular, in this case Style, Chrome is mixing up the already sorted sizes. Please see Plnk below (open in Chrome and IE/FireFox to see the difference)

http://plnkr.co/edit/6TO8pZZ8jZ8Tytw6wHpQ?p=preview

Answer 1

Nothing wrong. Since you're sorting by other field - size could be shuffled in any manner. orderBy relies on buit-in sort function of browser (source). Browser implementations could be different. And sort shouldn't be stable (MDN, ES2015 Standard section).

If you want to achieve consistent behavior use sorting by multiple fields. Like

orderBy:[predicate, 'size']:reverse