Upon loading the page, my initial dropdown functions correctly. However, the child dropdown is loaded from localstorage after the first dropdown. The issue arises when I load the second dropdown and set it to the default value - at this point, I am unable to modify its value. For reference, check out this JSFiddle: http://jsfiddle.net/silvajeff/x2nrX/3/
angular.module('demoApp', []).controller('DemoController', function($scope) {
//my first drop down loads with the page
$scope.options = [
{ label: 'one', value: 1 },
{ label: 'two', value: 2 },
{ label: 'three', value: 3 },
{ label: 'four', value: 4 },
{ label: 'five', value: 5 }
];
$scope.firstSelect = $scope.options[3];
//the second drop down loads after the first makes a selection. In the real code I am populating the second from localstorage, but once it's assigned its default value I cannot change it.
var init = function(){
//depends on what was selected in first select
$scope.captions = [
{ name: 'A', value: 'a' },
{ name: 'B', value: 'b' },
{ name: 'C', value: 'c' },
{ name: 'D', value: 'd' },
{ name: 'E', value: 'e' }
];
$scope.secondSelect = $scope.captions[1];
}
init();
});