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 g

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

 
            {{country.name}}          
        

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

            
              Please select a state
              {{state.name}}
            

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