JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine.css">
<script src="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine.js"></script>
<script src="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine-html.js"></script>

<div ng-app='sortModule'>
<div  ng-controller='sortController'>
    <h1>Unsorted colors</h1>
    <ul>
        <li ng-repeat='item in colorsArray track by $index'><span style="background-color:{{item.code}}">{{item.color}}</span> - {{item.id}}</li>
    </ul>
    <h1>Sorted by color</h1>
    <ul>
        <li ng-repeat='item in sortedColors track by $index'><span style="background-color:{{item.code}}">{{item.color}}</span> - {{item.id}}</li>
    </ul>
</div>
</div>

JavaScript

var app = angular.module('sortModule', []);
app.factory('sortFactory', function(){
		var sortedColors = []
    var shouldPush = true;
    return {
        sortColors: function(colorsArray){
        	var colorsOrder = [{color:'green'},{color:'yellow'},{color:'blue'},{color:'red'}]      
          for(color in colorsOrder) {
            for(objColor in colorsArray)	 {
            	shouldPush = colorsOrder[color].color === colorsArray[objColor].color ? true : false
              if(shouldPush) {sortedColors.push(colorsArray[objColor]);} 
            }
          }
          return sortedColors;
        }
    }               
});
app.controller('sortController', function($scope,sortFactory){    
    $scope.colorsArray = [{id: '1',color: 'red',code : '#ff0000'},{id: '2',color: 'blue',code : '#0000ff'},{id: '3',color: 'red',code : '#ff0000'},{id: '4',color: 'yellow',code : '#ffff00'},{id: '5',color: 'green',code : '#00ff00'}];
    $scope.sortedColors = sortFactory.sortColors($scope.colorsArray) 
});

describe('colorsFactory', function () {	
		beforeEach(module('sortModule'));
    it('can get the actual sorted ordered colors list', inject(function(sortFactory) {
    	expect(sortFactory).toBeDefined();
  	}));
});

var NOT_IMPLEMENTED = undefined;

var sortedColors = '[{"id":"5","color":"green","code":"#00ff00"},{"id":"4","color":"yellow","code":"#ffff00"},{"id":"2","color":"blue","code":"#0000ff"},{"id":"1","color":"red","code":"#ff0000"},{"id":"3","color":"red","code":"#ff0000"}]';

// load jasmine htmlReporter
(function() {
  var env = jasmine.getEnv();
  env.addReporter(new jasmine.HtmlReporter());
  env.execute();
}());