title: Update <select> tag inside ng-if in angularjs
body: <p>I would like to update the list of states on selection of country. I have researched a bit into this where it was recommended to use $parent as ng-if does not work on controller scope.But that too is not working for me. </p>
  
  <p>Can someone please help me understand how to get the values into state select control.</p>
  
  <p>Also I would also like to know what if there are multiple ng-if in my HTML. (again nested $parent.$parent.$parent... is not working)</p>
  
  <p>Plunker Link : <a href="http://plnkr.co/edit/y1L8NHbqxgtgqbnjY47R?p=preview" rel="nofollow">Plunker Link</a></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>"use strict";
  
  var app = angular.module("app", []);
  
  function CountriesController($scope) {
    $scope.condition = true;
      $scope.countries = [{
          "name": "USA",
          "id": 1
        },{
          "name": "Canada",
          "id": 2
      }];
      
      $scope.states = [{
          "name": "Alabama",
          "id": 1,
          "countryId": 1
        }, {
          "name": "Alaska",
          "id": 2,
          "countryId": 1
        }, {
          "name": "Arizona",
          "id": 3,
          "countryId": 1
        }, {
          "name": "Alberta",
          "id": 4,
          "countryId": 2
        }, {
          "name": "British columbia",
          "id": 5,
          "countryId": 2
      }];
      
      $scope.updateCountry = function(){
        $scope.availableStates = [];
        
        angular.forEach($scope.states, function(value){
          if(value.countryId == $scope.country.id){
            $scope.availableStates.push(value);
          }
        });
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html data-ng-app="app"&gt;
  
  &lt;head&gt;
    &lt;script data-require="angular.js@1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="style.css" /&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body data-ng-controller="CountriesController"&gt;
    &lt;div ng-if="condition"&gt;
      &lt;select data-ng-model="country" data-ng-options="country.name for country in countries" data-ng-change="updateCountry()"&gt;
        &lt;option value=""&gt;Select country&lt;/option&gt;
      &lt;/select&gt;
      &lt;br&gt;
      &lt;select data-ng-model="state" data-ng-options="state.name for state in availableStates"&gt;
        &lt;option value=""&gt;Select state&lt;/option&gt;
      &lt;/select&gt;
      &lt;br&gt; Country: {{country}}
      &lt;br&gt; State: {{state}}
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>