Dynamic dropdown select in AngularJS not working - angularjs

Question

I am practicing with Angular and want to give users the option to choose from 3 dropdown select menus. The third menu should be dynamic depending on the selection from the previous two menus.
My html:
// First dropdown menu, static
<select ng-model="selectedLetter" ng-change="setColorSelection()"
ng-options="letter as letter for letter in letters">
</select>
<br>
// second dropdown menu, static
<select ng-model="selectedNumber" ng-change="setColorSelection()"
ng-options="number as number for number in numbers">
</select>
<br>
// third dropdown menu, should be dynamic
<select ng-model="selectedColor"
ng-options="color as color for color in colorSelection">
</select>
In my controller, I have the lists like this
$scope.letters = ['A', 'B'];
$scope.numbers = ['1', '2'];
var colors = {
'A1': [{"red": "100"}, {"pink": "101"}],
'A2': [{"blue": "202"}, {"black": "203"}],
'B1': [{"yellow": "304"}, {"orange": "305"}],
'B2': [{"white": "406"}, {"black": "407"}]
};
$scope.colorSelection = [];
$scope.setColorSelection = function() {
if ($scope.selectedLetter && $scope.selectedNumber) {
$scope.colorSelection = colors[$scope.selectedLetter + $scope.selectedNumber];
console.log($scope.colorSelection);
}
}
So if the user selects 'A' from the first menu and '2' from the second menu, he should see the options for 'A2' in the third menu.
Problem: currently, the third menu is not populating.
When I do console.log($scope.colorSelection), I get [Object, Object] in the console instead of [{"blue": "202"}, {"black": "203"}].
Also, I only want to display the colors in the menu, not the numbers associated with them. I was able to do this in ng-repeat using (key, value), not sure how I would do this in ng-options.

Answer 1

Change your color object like
var colors = {
'A1': [{"color": "Red", "code": "100"}, {"color":"pink", "code": "101"}]
};
and ng-option
<select ng-model="selectedColor"
ng-options="color.code as color.color for color in colorSelection">
</select>

Answer 2

Dropdown working properly and correctly. The problem in your json object [{"red": "100"}, {"pink": "101"}].
Dropdown can be used as the source object, or an array.
All possible options dropdown use, see the documentation.
I think there are two ways to change your json:
Transform it into an array of objects.
Transform it into a single object with the keys.
First way:
var colors = {
'A1': [{"color": "red", "code": "100"}, {"color":"pink", "code": "101"}]
};
Second way:
var colors = {
'A1': {"red": "100","pink": "101"}
};
See example on jsfiddle;
angular.module('ExampleApp', [])
.controller('ExampleController', function($scope) {
$scope.letters = ['A', 'B'];
$scope.numbers = ['1', '2'];
var colorsByArray = {
'A1': [{
"color": "red",
"code": "100"
}, {
"color": "pink",
"code": "101"
}]
};
var colorsByObject = {
'A1': {
"red": "100",
"pink": "101"
}
};
$scope.colorSelection = [];
$scope.setColorSelection = function() {
if ($scope.selectedLetter && $scope.selectedNumber) {
$scope.colorSelectionByArray = colorsByArray[$scope.selectedLetter + $scope.selectedNumber];
$scope.colorSelectionByObject = colorsByObject[$scope.selectedLetter + $scope.selectedNumber];
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
<div ng-controller="ExampleController">
Choose 'A'
<select ng-model="selectedLetter" ng-change="setColorSelection()" ng-options="letter as letter for letter in letters">
</select>
<br>Choose '1'
<select ng-model="selectedNumber" ng-change="setColorSelection()" ng-options="number as number for number in numbers">
</select>
<br>
<h3>
IterateByArray
</h3>
<select ng-model="selectedColor" ng-options="color.code as color.color for color in colorSelectionByArray">
</select>
<h3>
IterateByObject
</h3>
<select ng-model="selectedColor" ng-options="v as k for (k, v) in colorSelectionByObject">
</select>
</div>
</div>