JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app='MyModule' ng-controller='MyController'>
    <h1>unsorted</h1>
    <ul>
        <li ng-repeat='item in myArray'>{{item.color}} - {{item.id}}</li>
    </ul>
    <h1>sorted</h1>
    <ul>
        <li ng-repeat='item in myArray | orderBy:redsFirst'>{{item.color}} - {{item.id}}</li>
    </ul>
</div>

JavaScript

angular.module('MyModule', [])

.controller( 'MyController', function($scope){
    
    $scope.myArray = [
        {
            id: '123',
            color: 'electronics'
        },
        {
            id: '234',
            color: 'web'
        },
        {
            id: '345',
            color: 'xyx'
        },
        {
            id: '456',
            color: 'xyz'
        }
    ];
    
    $scope.redsFirst = function(record){
        return record.color !== 'web' ||'electronics' ;
    }
});