title: Angularjs &Angular Material : Country dependency dropdown list
body: <p>I would like to show up a dropdown list when country contains state and an input field if country does not contain states. I have added some codes here, but i don't know why they don't seem to work. When I click on the country that contains state, drop down list will work on the first time and same goes for states input field(after i refresh, not after i've clicked on the country that contains state). Countries that contain states are india and canada. </p>
  
  <p>Here is my partial view code:</p>
  
  <pre><code>&lt;div ng-controller="DemoCtrl" layout="column" ng-cloak="" class="md-inline-form inputdemoBasicUsage" ng-app="MyApp"&gt;
  
     &lt;md-input-container class="md-block" flex-gt-sm &gt;
                          &lt;label&gt;Country&lt;/label&gt;
                          &lt;md-select name="countryDropdown1" ng-model="candidateData.PermanentAddress.Country" ng-required="true"&gt;
                              &lt;md-option ng-repeat="country in countrylist" value="{{country.country}}" ng-click="getCountryStates(country.id)" &gt;
                                  {{country.country}}
                              &lt;/md-option&gt;
                          &lt;/md-select&gt;
  
                      &lt;/md-input-container&gt;
  
                      &lt;md-input-container class="md-block" ng-show="stateInput"&gt;
                          &lt;label&gt;State&lt;/label&gt;
                          &lt;input required name="stateInput" ng-model="candidateData.PermanentAddress.State" ng-required="true"/&gt;
  
                      &lt;/md-input-container&gt;
  
                          &lt;md-input-container class="md-block" flex-gt-sm ng-show="States" &gt;
                              &lt;label&gt;State&lt;/label&gt;
                              &lt;md-select name="stateDropdown1" ng-model="candidateData.PermanentAddress.State"ng-required="true" &gt;
                                  &lt;md-option ng-repeat="state in states" value="{{state.state}}"&gt;
                                      {{state.state}}
                                  &lt;/md-option&gt;
                              &lt;/md-select&gt;
  
                          &lt;/md-input-container&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my angular controller: 
  angular</p>
  
  <pre><code>  .module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
    .controller('DemoCtrl', function($scope, $filter) {
  
  
     $scope.getCountry = function () {
              return countrylist;
          };
  
          $scope.getCountryStates = function (countryId) {
              $scope.states = ($filter('filter')($scope.statelist, { countryId: countryId }));
              $scope.showStates(countryId);
          };
  
          $scope.States = false;
          $scope.stateInput = false;
          //$scope.showStates = function (countryId) {
  
          //    for (var i = 0; i &lt; $scope.statelist.length; i++) {
          //        if ($scope.statelist[i].countryId == countryId) {
          //            $scope.States = true;
          //            return false;
          //        }
  
          //    }
          //    $scope.States = false;
          //    $scope.stateInput = true;
          //    return false;
          //}
          $scope.showStates = function (countryId) {
  
              for (var i = 0; i &lt; $scope.statelist.length; i++) {
                  if ($scope.statelist[i].countryId == countryId) {
                      $scope.States = true;
                      return false;
                  }
                  //else {
                  //    $scope.States = false;
                  //    $scope.stateInput = true;
                  //    return false;
                  //}    
              }
  
              $scope.States = false;
              $scope.stateInput = true;
              return false;
          }
  
  
  $scope.statelist = [{ "Id": 4, "state": "New Brunswick", "countryId": 2 },
  { "Id": 5, "state": "Manitoba", "countryId": 2 },
  { "Id": 6, "state": "Delhi", "countryId": 3 },
  { "Id": 7, "state": "Bombay", "countryId": 3 },
  { "Id": 8, "state": "Calcutta", "countryId": 3 },
  { "Id": 9, "state": "Johor", "countryId": 145 },
  { "Id": 10, "state": "Kedah", "countryId": 145 },
  { "Id": 11, "state": "Kelantan", "countryId": 145 },
  { "Id": 12, "state": "Labuan", "countryId": 145 },
  { "Id": 13, "state": "Melaka", "countryId": 145 },
  { "Id": 14, "state": "Negeri Sembilan", "countryId": 145 },
  { "Id": 15, "state": "Pahang", "countryId": 145 },
  { "Id": 16, "state": "Perak", "countryId": 145 },
  { "Id": 17, "state": "Perlis", "countryId": 145 },
  { "Id": 18, "state": "Pulau Pinang", "countryId": 145 },
  { "Id": 19, "state": "Sabah", "countryId": 145 },
  { "Id": 20, "state": "Sarawak", "countryId": 145 },
  { "Id": 21, "state": "Selangor", "countryId": 145 },
  { "Id": 22, "state": "Terengganu", "countryId": 145 },
  { "Id": 23, "state": "Wilayah Persekutuan", "countryId": 145 }]
  
  
  $scope.countrylist = [
         { "id": 1, "country": "USA" },
         { "id": 2, "country": "Canada" },
         { "id": 3, "country": "India" },
         { "id": 4, "country": "Malaysia" },];
  
    });
  </code></pre>
  
  <p>Here is my link to the code: </p>
  
  <p><a href="http://codepen.io/zcook/pen/yOEPMa" rel="nofollow">http://codepen.io/zcook/pen/yOEPMa</a></p>