Angularjs trigger country state dependency

Question

Can someone please help me make my example of Country/State drop down dependency work?

I intentionally created JSON in this way because I want the dependency to be generic, so I would be able to apply it on any drop down while using only Meta Data and not HTML.

Here's a link to see an example of the code in JSFidlle

HTML

Country:<select data-ng-model="Countries" data-ng-options="country.id as country.name for country in Countries.items">
            <option value="">Please select a country</option>
        </select>

State: <select data-ng-model="currentItem" data-ng-options="item.id as item.name for item in currentStates.items">
            <option value="">Please select a state</option>
        </select>

JavaScript Code:

function Controller($scope) {

var Countries = {
    "id": "field10",
    "items": [{
                "id": "10",
                "StateGroupID":"0",
                "name": "United State"
              }, 
              {
                 "id": "2",
                 "StateGroupID":"1",
                 "name": "Canada"
              }]
};

var States =
    {   "id": "field20",
        "StateGroups": [{
            "items": [{  "id": "1",
                       "name": "Alabama"
                      }, 
                      {
                          "id": "2",
                          "name": "Alaska"
                      }, 
                      {  "id": "3",
                       "name": "Arizona"
                      }, 
                      {  "id": "4",
                       "name": "California"
                      }]},

                 [{  "id": "201",
                    "name": "Alberta"
                   }, 
                  {
                      "id": "202",
                      "name": "British Columbia"
                  }, 
                  {
                      "id": "303",
                      "name": "Manitoba"
                  }, 
                  {
                      "id": "304",
                      "name": "Ontario"
                  }]]
};

$scope.Countries = Countries;
$scope.currentStates = States.StateGroups[0];
$scope.$watch('currentStates', function(value, oldValue){
    //alert(value);
    //alert(JSON.stringify(value));
    //$scope.currentStates = (value == "10") ?  States.StateGroups[0] : States.StateGroups[1];
});

}

Answer 1

first, I think there is a little mistake in your JSON, you should have one "items" before the Canadian states

          {"items": [{  "id": "201",
                    "name": "Alberta"
                   }, .....

After doing this, I would modify your HTML in order to have 2 different model names (the way you did, at the first click you overwrite the list of countries). Then I'll use a different syntax for the ng-repeat, in order to force the value to the StateGroupId

 <select data-ng-model="selectedCountry">
            <option ng-repeat='country in Countries.items' value='{{country.StateGroupID}}'>{{country.name}}</option>          
        </select>

Doing this allows you to create a function to get the states of the selected group ID :

 $scope.getStates=function(){
    console.log($scope.selectedCountry)
     return $scope.backupStates.StateGroups[$scope.selectedCountry].items;
}

Then you can use this function to display them using ng-repeat

            <select data-ng-model="selectedState" >
              <option value="">Please select a state</option>
              <option ng-repeat='state in getStates()'>{{state.name}}</option>
            </select>

I modified your fiddle here : http://jsfiddle.net/DotDotDot/TsxTU/14/ , I hope this is the kind of behavior you wanted :)