auto-populate select list with a one to several relationship in AngularJS

Question

So I started with a need for a simple auto populate form field. As a user selects a drop down menu item, another field is automatically populated. Now I need to auto-populate another field, this time another select list with two choices each for each previous selection.

This is how it works:

source system selected - other source systems pre-populated with value. I did this using this method:

HTML:

<form name="intakeform">
         <div class="form-group">
            <label for="sourceSystem">Source System</label>
           <select class="form-control" ng-model="system" ng-options="s.name for s in systems" >
                <option value="">Select Source System</option>
           </select>   
        </div>
       <div class="form-group">
            <label for="otherSystem">Other Source System Indentifiers</label>
            <input type="text" ng-model="system.ossi" class="form-control" placeholder="Other Source System Indentifiers">
        </div>
</form>

app.js controller:

routerApp.controller('IntakeController', function($scope, $timeout){
 $scope.systems = [{
    name: 'Cosmos',
    ossi: 'Cosmos DIV',
  },
  {
    name: 'UNET',
    ossi: 'ADJ and ENG',
  },
];
});

This allowed a nice 1:1 relationship. If I chose one system, the other system was automatically selected. Now I have to have another select list based on the source system selection. This means I'm going to have a two item select list for each of the source systems - resulting in a 2:1 relationship.

How would I do this in Angular then? I've tried the ng-show, ng-hide and I'm not sure I can do this with the ng-options either in my current set up. This are static lists, and won't be dynamic if that helps. There are tons of examples of having one list show after one item is selected in another list, but I can't seem to find an example where someone had several items in a drop down list that was dependent on the initial selection.

any help is appreciated

P

Answer 1

One way could be create a function trigger on change (ng-change="populateSecond($index)"), then, in the controller you can have the an array of arrays with the data for the second select:

$scope.data = [
     [{one: "opOne"}, {two: "opTwo"}],
     [{three: "opThree"}, {four: "opFour"}].
     ... 
];

If this data is sorted acording to the option in the first element, then passing the index helper can help you assigned this new data to the model in the populateSencond function():

 $scope.populateSecond = function(index) {
     $scope.system.osi = $scope.data[index];
 };

Answer 2

I did eventually figure it out. Before I was using a jQuery chaining plugin ( http://www.appelsiini.net/projects/chained ) and figured there was an angular equivalent and figured out if I do this in my controller:

routerApp.controller('IntakeController', function($scope, $timeout){
 $scope.systems = [{
    name: 'Cosmos',
    ossi: 'Cosmos DIV',

    "type": "cosmos",
       "options":[
     {"value": "physician"},
     {"value": "hospital"}
     ],     
  },
  {
    name: 'UNET',
    ossi: 'ADJ and ENG',

      "type": "unet",
       "options":[
     {"value": "member"},
     {"value": "provider"}
     ],     
  },
];

});

I could get the same functionality - which I was able to do.