使用 URL 填充下拉菜单

我遇到了一个非常棘手的问题。我的 Angular UI 为用户提供了 3 个下拉菜单，第三个菜单是基于前两个菜单的动态菜单。这工作正常。我还有一个映射到 3 个下拉菜单的动态 URL，以便浏览器可以自动填充它们。例如，如果浏览器 URL 是"/home？selectedLetter=A&selectedNumber=2&selectedColor=7891"，那么在我将此 URL 粘贴到新选项卡中后，下拉列表应自动设置为 A、2 和黑色（对应于数组中的 7891）。

但是，只有 selectedLetter 和 selectedColor 下拉列表按预期填充，selectedColor 为空（调试后我发现这是因为从未调用 setColorSelection（） .前两个菜单中的 ng-change（） 调用永远不会触发）。浏览器肯定知道 selectedColor 是 7891，但只是没有在 UI 中显示它。即使我可以显示它，如何在菜单中将其转换为"黑色"？我似乎无法解决这个问题。有什么想法吗？

.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];
    }
}