title: Angularjs: update select options
body: <p>I have two select menus . One for country selection and other for state. I need to update states based country selected. I am able to log states but not able to list them in select menu.Please help.</p>
  
  <p>Angular:</p>
  
  <pre><code>angular.module('demoApp', []).controller('DemoController', function($scope) {
  $scope.countries = [
      { label: 'Please select', value: 0 },
      { label: 'India', value: 1 },
      { label: 'US', value: 2 }
  ];
  
  $scope.data = [{'1':[{ label: 'Delhi', value: 0 },{ label: 'Mumbai', value: 1 },{ label: 'Chennai', value: 2 }]},
                  {'2':[{ label: 'Alabama', value: 3 },{ label: 'Alaska', value: 4 },{ label: 'Arizona', value: 5 }]}];
  
  $scope.vm = {states: []};                                              
  
  $scope.updateStates = function(countryCode){
      $scope.vm.states = $scope.data[countryCode-1];
      console.log($scope.vm.states);
  };
  
  $scope.correctlySelected = $scope.countries[0];
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body ng-app="demoApp"&gt;
      &lt;div ng-controller="DemoController"&gt;
          &lt;select ng-model="correctlySelected" ng-change="updateStates(correctlySelected.value)" ng-options="opt as opt.label for opt in countries"&gt;
          &lt;/select&gt;
          &lt;select ng-options="opt as opt.label for opt in vm.states"&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>JS Bin:
  <a href="http://jsbin.com/pafosewedo/1/edit?html,js,console,output" rel="nofollow">http://jsbin.com/pafosewedo/1/edit?html,js,console,output</a></p>