Update the dropdown contents after GET new value based on another field selection
<p>I have a View with 2 md autocomplete fields bind to list of values.</p>

<p>When I select the first field, I send a GET request to get list of values to bind to the next field.</p>

<p>I get the new list and update the value of my 2nd control to the new list.</p>

<p>But, in the UI the value contents of the 2nd list are not being updated to show the new list values.</p>

<p>The 2nd control is not refreshing with new values.</p>

<p>I have tried $scope.$apply().</p>

<p>But, it doesn't work. My dev tool crashes.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function CompanyInfoCtrl($state, $scope, genericInfo) {
  this.states = genericInfo.states;
  this.cities = genericInfo.cities;
      
  //when user Selects a State
  //Update this.cities with the new ListOfCities in the selected State

  //Call this method where field = this.cities
  function(address, field) {
    if(address &amp;&amp; address.state) 
      return $http.get('http://localhost:8090/common/listofcitiesbystate/' + address.state).then(function(response){
        field = response.data;
      })
  }
}</code></pre>
</div>
</div>
</p>