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 by color</h1>
    <ul>
        <li ng-repeat='item in sortedColors'>{{item.color}} - {{item.id}}</li>
    </ul>
</div>

JavaScript

angular.module('MyModule', [])

.controller( 'MyController', function($scope){
    
    $scope.redsFirst=[];
    $scope.myArray = [
        {
            id: '123',
            color: 'red'
        },
        {
            id: '234',
            color: 'blue'
        },
        {
            id: '345',
            color: 'red'
        },
        {
            id: '456',
            color: 'yellow'
        },
        {
            id: '789',
            color: 'green'
        }
    ];

    getSortedColors();
    function getSortedColors() {
    	var colorsOrder = [{color:'green'},{color:'blue'},{color:'yellow'}]
      $scope.sortedColors= $scope.myArray.sort(function(a,b){
        return 1+colorsOrder.map(function(x){ 
        	return x.color; }).indexOf(b.color)
      })
    }
});