JSFiddle - React, Tailwind, and code Playground

by DotDotDot

HTML

<section ng-app ng-controller="Controller">
    	<h2 class="page-title">Model</h2>

    <div class="row-fluid">
        <div class="span4">
            <label for="cboGroup">Countries</label>
            <select data-ng-model="selectedCountry">
                <option ng-repeat='country in Countries.items' value='{{country.StateGroupID}}'>{{country.name}}</option>             
            </select>
        </div>
        <div class="span4">
            <label for="cboItem">States</label>
            <select data-ng-model="selectedState" >
                <option value="">Please select a state</option>
                <option ng-repeat='state in getStates()'>{{state.name}}</option>
            </select>
        </div>
        <BR><div class="well">what I am trying to archive is that the items are changing each time the group changes.</div><BR>
        <div>Countries : {{Countries.items | json}}</div>
        <div>States : {{getStates()}}</div>
    </div>
</section>

JavaScript

function Controller($scope) {
 
    $scope.backupCountries = {
        "id": "field10",
        "items": [{
                    "id": "10",
                    "StateGroupID":"0",
                    "name": "United State"
                  }, 
                  {
                     "id": "2",
                     "StateGroupID":"1",
                     "name": "Canada"
                  }]
    };

    $scope.backupStates =
        {   "id": "field20",
            "StateGroups": [{
                "items": [{  "id": "1",
                           "name": "Alabama"
                          }, 
                          {
                              "id": "2",
                              "name": "Alaska"
                          }, 
                          {  "id": "3",
                           "name": "Arizona"
                          }, 
                          {  "id": "4",
                           "name": "California"
                          }]},
                
                            {"items": [{  "id": "201",
                        "name": "Alberta"
                       }, 
                      {
                          "id": "202",
                          "name": "British Columbia"
                      }, 
                      {
                          "id": "303",
                          "name": "Manitoba"
                      }, 
                      {
                          "id": "304",
                          "name": "Ontario"
                      }]}]
    };

    $scope.Countries = $scope.backupCountries;
    $scope.getStates=function(){
        console.log($scope.selectedCountry)
         return $scope.backupStates.StateGroups[$scope.selectedCountry].items;
    }
    
    
    //$scope.currentStates = $scope.backupStates.StateGroups[0];
    
    /*$scope.$watch('currentStates', function(value, oldValue){
        //alert(value);
        //alert(JSON.stringify(value));
        //$scope.currentStates =...