Заполнение выпадающих меню URL

Я столкнулся с очень сложной проблемой. Мой Угловой пользовательский интерфейс дает пользователям 3 раскрывающихся меню, а 3-е меню - динамическое, основанное на двух предыдущих меню. Это прекрасно работает. У меня также есть динамический URL-адрес, который отображается в 3 раскрывающихся меню, поэтому браузер может автоматически их заполнять. Например, если URL-адрес браузера "/home? SelectedLetter = A & selectedNumber = 2 & selectedColor = 7891", то после того, как я вставляю этот URL-адрес на новую вкладку, выпадающие списки должны автоматически устанавливаться на A, 2 и Black (что соответствует 7891 в массиве).

Тем не менее, только выпадающие списки selectedLetter и selectedColor заполняются, как ожидалось, selectedColor пуст (после отладки я нашел его, потому что setColorSelection() никогда не вызывается. Ng-change() вызовы в первых двух меню никогда не запускаются). Браузеру определенно известно, что selectedColor - 7891, но просто не отображает его в пользовательском интерфейсе. Даже если я смогу его показать, как мне преобразовать его в "Черный" в меню? Я просто не могу обойти эту проблему. Есть идеи?

HTML:

<select ng-model="selectedLetter" 
        ng-change="setColorSelection()" 
        ng-options="letter as letter for letter in letters">
</select>
<select ng-model="selectedNumber" 
        ng-change="setColorSelection()" 
        ng-options="number as number for number in numbers">
</select>
<select ng-model="selectedColor" 
        ng-options="color.ID as color.colorName for color in colorSelection">
</select>

Угловой внутренний контроллер:

$scope.letters = ['A', 'B'];
$scope.numbers = ['1', '2'];

var colors = {      // Note that all IDs are unique
    'A1': [{"colorName": "Red", "ID": "1001"}, {"colorName": "Pink", "ID": "3002"}],
    'A2': [{"colorName": "Blue", "ID": "9022"}, {"colorName": "Black", "ID": "7891"}],
    'B1': [{"colorName": "Yellow", "ID": "5436"}, {"colorName": "Orange", "ID": "4444"}]
};

$scope.colorSelection = [];


// This populates selectedLetter and selectedNumber, doesn't work for selectedColor
var params = $location.search()
if (params.selectedLetter) {
    $scope.selectedLetter = params.selectedLetter;
}
if (params.selectedNumber) {
    $scope.selectedNumber = params.selectedNumber;
}
if (params.selectedColor) {
    $scope.selectedColor = params.selectedColor;
}


$scope.setColorSelection = function() {
    if ($scope.selectedLetter && $scope.selectedNumber) {
        $scope.colorSelection = colors[$scope.selectedLetter + $scope.selectedNumber];
    }
}