Knockout.js - Lost two way binding of select value when using foreach instead of option

I have two select controls.

One depends on the other. As a simple example, let's say the first displays a list of cities and the other displays a list of streets for each city.

When the page is initially loaded, the display street selection control will display all available streets. However, once the user selects a city in the first selection, the second selection is filtered to display only streets that belong to the selected city.

This works fine when using option binding, however, I need to have the ability to generate optgroup and option binding doesn't support it, so I have to use foreach binding.

As a result, just picking a city has two unintended consequences:

1. Even if I use valueAllowUnset: true the second selection (filtered list of streets) seems to have the first street of the selected city. This is not reflected in the view model
2. When actually selecting a street in the 2nd selection and then a different city in the 1st selection, the 2nd selection correctly updates to reflect the change in the list, but the viewmodel does not update so the previously selected value is still retained (even if it's no longer in the list). The problem persists even after removing valueAllowUnset: true from the second select.

Is there a solution to this problem? I really have to use foreach binding instead of option binding.

JSFiddle：https：//jsfiddle.net/jfxovLna/13/

var ViewModel = function() {

var self = this;

var regionAndCityArray = [{
 regionName: "Europe",
 cities: [{
   cityName: "London",
   additionalUnimportantInformation: 100
 }, {
   cityName: "Paris",
   additionalUnimportantInformation: 200
 }]
}, {
 regionName: "North America",
 cities: [{
   cityName: "New York",
   additionalUnimportantInformation: 45
 }]
}];

var cityAndStreetArray = [{
 cityName: "London",
 streets: [{
   streetName: "Parker",
   streetLength: 5
 }, {
   streetName: "Macklin",
   streetLength: 10
 }, ]
}, {
  cityName: "New York",
 streets: [{
   streetName: "5th Avenue",
   streetLength: 3
 }, {
   streetName: "Park Ave",
   streetLength: 12
 }]
}, {
  cityName: "Paris",
 streets: [{
   streetName: "Rue de Turbigo",
   streetLength: 11
 }, {
   streetName: "Rue aux Ours",
   streetLength: 12
 }]
}];

var getAvailableStreets = function() {

 var availableStreets = cityAndStreetArray;

 var selectedCity = self.selectedCity();

 var selectedRegion = _.find(regionAndCityArray,
   function(region) {
     return _.find(region.cities,
       function(city) {
         return city.cityName === selectedCity;
       });
   });

 if (selectedRegion == undefined) {
   return availableStreets;
 }

 var filteredStreets = _.filter(cityAndStreetArray,
   function(city) {
     return city.cityName === selectedCity;
   });

 return filteredStreets;
}

self.availableCities = ko.observableArray(regionAndCityArray);
self.selectedCity = ko.observable();
self.availbleStreets = ko.computed(getAvailableStreets);
self.selectedStreet = ko.observable();

};
var viewModel = new ViewModel();
ko.applyBindings(viewModel);