Populate dropdown based on another, second one still remembers old selection - angularjs

Question

I have an unwanted behavior: The second dropdown remembers the old item? Why?
http://jsfiddle.net/Xku9z/ (fiddle borrowed from another thread)
Scenario:
Step 1. Select an item in the first dropdown
Step 2. Select an item in the second dropdown
Step 3. Select an item in the first dropdown (without selecting anything in the second one)
Step 4. Select the same item in the first dropdown as you did in step 1.
I have no clue how to resolve this, I've been using $scope.$watch on the ng-model="option2" just to get a grip on the problem without success.
Also, by setting option2 = null in the data-ng-change="getOptions2()" wont help:
$scope.getOptions2 = function(){
$scope.option2 = null;
};
Any ideas? Thanks

Answer 1

The behaviour you're experiencing is easier to understand if you watch the $scope.option2 value.
When you change the first dropdown you actually don't modify the $scope.option2 value. It stays the same: it's remembered. To make it work like you want just add one line
$scope.option2 = null;
at end of getOptions2 function. That's it. If you want more explanation of the current behaviour, read on.
Why does the second select go blank when I change the first one if the value is remembered?
<select> elements will show a selected value if and only if the value of ng-model can be found in the array bound to this element with ng-options.
Select first items from both dropdowns. Now:
$scope.option2 = "option2 - 1-1";
$scope.options2 = ["option2 - 1-1","option2 - 1-2","option2 - 1-3"];
As you can see the first variable can be found in the array so the value is displayed as currently selected. Now change only the first dropdown to the second item:
$scope.option2 = "option2 - 1-1";
$scope.options2 = ["option2 - 2-1","option2 - 2-2","option2 - 2-3"];
As you can see, $scope.option2 is not changed, but it's no longer in the $scope.options2 array. Therefore its value is not displayer as currently selected.