data binding - Refresh datasource dynamically in kendo mvvm -

hi i've kendo grid country , state details. , i've toolbar add button. when click on add new button, i'm getting popup country , state dropdowns. want select country state. here want load states based on country selection. here sample code. not working.

function loadstates(element) {  // here want update below model statemodel.statesbycountry  this.         statemodel.loadstatesbycountry($(element).val(), function () {          });      }      <script id="popup_editor" type="text/x-kendo-template">          <div class="k-edit-label">                         <label for="country">country</label>                     </div>                       <input name="cntryname"                          data-bind="value:cntryname"                         data-value-field="value"                          data-text-field="text"                          data-source= countrymodel.allcountries                         data-role="dropdownlist"                         onchange="loadstates(this)"                  />           <div class="k-edit-label">                         <label for="state">state</label>                     </div>                     <input name="statename"                          data-bind="value:statename"                          data-value-field="stateid"                          data-text-field="statename"                          data-source=statemodel.statesbycountry                          data-role="dropdownlist"     />     </script> 

every time have country selected, can filter states available, don't have care in next popup.

see examples here http://docs.kendoui.com/api/framework/datasource#methods-filter