title: knockout js - subscribe is not updating <select> options
body: <p>I'm using Knockout JS. I have two <code>&lt;select&gt;</code>'s. One has regions, and the other has towns within the selected region. When the user selects a region, the towns select is supposed to update with the towns for that region. However in my website it does not. Why is that? Here is my code:</p>
  
  <pre><code>interface iGetAreas {
          _areasList: Array&lt;string&gt;;
          _areas: KnockoutObservableArray&lt;string&gt;;
          _selectedArea: KnockoutObservable&lt;string&gt;;
          getAreas(geonameId: string);
      }
  
      class AreaGetter implements iGetAreas {
          _areasList = [];
          _areas = ko.observableArray([]);
          _selectedArea = ko.observable('');
  
  
          getAreas = (geonameId) =&gt; {
              this._areasList = [];
              $.ajax({
                  url: `http://api.geonames.org/children?geonameId=${geonameId}&amp;username=elion`
              }).then((allAreasXML) =&gt; {
                  var allAreasJSON = xml2json(allAreasXML);
                  var allAreas = JSON.parse(allAreasJSON);
                  if(allAreas.geonames.length) {
                      for (var index = 1; index &lt; allAreas.geonames.length - 1; index++) {
                      this._areasList.push(allAreas.geonames[index].geoname);
                      }
                  } else {
                      if(allAreas.geonames) {
                          this._areasList.push(allAreas.geonames.geoname);
                      }
                  }
                  this._areas(this._areasList);
                  $('.tvr-select').each(function() {
                      $(this).multiselect({
                          buttonWidth: '100%',
                          buttonContainer: '&lt;div style="height: 64px;" /&gt;',
                          buttonClass: 'none'
                      });
                  })
              });
          }
      }
  
  class SearchFilterViewModel {
      _regionGetter: AreaGetter;
      _townGetter: AreaGetter;
      _categories: KnockoutObservableArray&lt;Category&gt;;
      _categoryID:number;
  
      constructor() {
          this._categoryID = 1;
          this._categories = ko.observableArray([
              new Category("Vegan Meat", 1), 
              new Category("Vegan Dairy", 2), 
              new Category("Confectionary", 3),
              new Category("Baking", 4),
              new Category("Restaurants", 5),
              new Category("Fashion", 6)
          ]);
          this._regionGetter = new AreaGetter();
          this._townGetter = new AreaGetter();
          this._regionGetter.getAreas("2186224");
          this._regionGetter._selectedArea.subscribe(this._townGetter.getAreas.bind(this._townGetter));
      }
  
      logMyStuff = function() {
          console.log(this._townGetter._areasList);
          console.log(this._regionGetter._areasList);
          console.log("stuff");
      }
  }
  
  $(document).ready(function() {
      var _searchFilterViewModel: SearchFilterViewModel = new SearchFilterViewModel();
      var _searchFilterForm = $("#find-vegan-products-page").find("form")[0];
      ko.applyBindings(_searchFilterViewModel, _searchFilterForm);
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="find-vegan-products-page" class="full-size container-fluid" style="height:900px; padding: 70px 40px 40px 40px;"&gt;
              &lt;!-- TODO: Make blackand white video section a bit shorter --&gt;
                  &lt;h1 style="margin:0px 0px 20px 0px; color: dimgray;"&gt;FILTER YOUR SEARCH&lt;/h1&gt;
                  &lt;button style="width:400px;height:400px;" data-bind="click: logMyStuff"&gt;&lt;/button&gt;
                  &lt;form role="form"&gt;
                      &lt;div class="row"&gt;
                          &lt;?
                              echo RegionSelect::display();
                              echo TownSelect::display();
                              //echo CategorySelect::display();
                              ?&gt;
                      &lt;/div&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-sm-12"&gt;
                              &lt;div id="go-button" 
                                  class="with-border clickable" 
                                  href="#find-vegan-products-page" &gt;
                                  &lt;h5  class=" text-center medium-text"&gt;GO&lt;/h5&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>selects are done by php templates but here is the output:</p>
  
  <pre><code>    &lt;select class="tvr-select" data-bind="options: _regionGetter._areas,
                  optionsText: 'name',
                  optionsValue: 'geonameId',
                  value: _regionGetter._selectedArea,
                  optionsCaption: 'REGION'
                  " style="display: none;"&gt;&lt;option value=""&gt;REGION&lt;/option&gt;&lt;option value="2193734"&gt;Auckland&lt;/option&gt;&lt;option value="2182560"&gt;Bay of Plenty&lt;/option&gt;&lt;option value="2192628"&gt;Canterbury&lt;/option&gt;&lt;option value="4033013"&gt;Chatham Islands&lt;/option&gt;&lt;option value="2190767"&gt;Gisborne&lt;/option&gt;&lt;option value="2190146"&gt;Hawke's Bay&lt;/option&gt;&lt;option value="2179671"&gt;Manawatu-Wanganui&lt;/option&gt;&lt;option value="2187304"&gt;Marlborough&lt;/option&gt;&lt;option value="6612108"&gt;Nelson&lt;/option&gt;&lt;option value="2185978"&gt;Northland&lt;/option&gt;&lt;option value="6612109"&gt;Otago&lt;/option&gt;&lt;option value="2182501"&gt;Southland&lt;/option&gt;&lt;option value="2181872"&gt;Taranaki&lt;/option&gt;&lt;option value="2181818"&gt;Tasman&lt;/option&gt;&lt;option value="2180293"&gt;Waikato&lt;/option&gt;&lt;option value="2179538"&gt;Wellington&lt;/option&gt;
              &lt;/select&gt;
  
  &lt;select class="tvr-select" data-bind="options: _townGetter._areas,
              optionsText: 'name',
              optionsValue: 'geonameId',
              value: _townGetter._selectedArea,
              optionsCaption: 'TOWN'
              " style="display: none;"&gt;&lt;option value=""&gt;TOWN&lt;/option&gt;&lt;option value="2193772"&gt;Ashburton District&lt;/option&gt;&lt;option value="7910036"&gt;Christchurch City&lt;/option&gt;&lt;option value="7910044"&gt;Hurunui District&lt;/option&gt;&lt;option value="7910046"&gt;Kaikoura District&lt;/option&gt;&lt;option value="7910050"&gt;Mackenzie District&lt;/option&gt;&lt;option value="7910060"&gt;Selwyn District&lt;/option&gt;&lt;option value="2181134"&gt;Timaru District&lt;/option&gt;&lt;option value="7910069"&gt;Waimakariri District&lt;/option&gt;
          &lt;/select&gt;
  </code></pre>
  
  <p>Notice I'm trying to run a function called <code>logMyStuff</code> but it never runs when I click the button. I want to find out if townGetter._areas is full of areas</p>