Angular multiple ng-options parent / child

Question

I have a number of select input children thats data changes depending on the parents selection.

Please see this Codepen for the type of data that will form my parent child relationship.

My starting piece of code is here:

Controller

$scope.params = ['Sets', 'Reps', 'Colour', 'Time', 'Weight'];

$scope.children = [{
    'Sets': ['1', '2', '3', '4', '5']
  }, {
    'Reps': ['1', '2', '3', '4', '5']
  }, {
    'Colour': ['Red', 'Green', 'Blue', 'Yellow', 'Pink']
  },

];

HTML

<label class="item item-input item-select">
    <div class="input-label positive">
        Param
    </div>
    <select ng-model="param">
        <option ng-repeat="param in params" value="{{param}}">{{param}}</option>
    </select>
</label>
<label ng-show="param" class="item item-input item-select">
    <div class="input-label positive">
        Sets
    </div>
    <select ng-model="param">
        <option ng-repeat="param in params" value="{{param}}">{{param}}</option>
    </select>
</label>

The children will only be visible if the corresponding parent is selected.

Answer 1

I would change the model like this:

$scope.params = ['Sets', 'Reps', 'Colour', 'Time', 'Weight'];

$scope.children = {
  'Sets': ['1', '2', '3', '4', '5'],
  'Reps': ['1', '2', '3', '4', '5'],
  'Colour': ['Red', 'Green', 'Blue', 'Yellow', 'Pink']
};

And then do something like this:

http://codepen.io/anon/pen/RPZzdM

Answer 2

I'm not sure I see a question here ;) But looking at your code the odd thing is that you set the same model in two different selects.

Try and change the ng-model in the second one to something distinct, e.g. childParam:

  <script id="popup-template.html" type="text/ng-template">
    <label class="item item-input item-select">
      <div class="input-label positive">
        Param
      </div>
      <select ng-model="param">
        <option ng-repeat="param in params" value="{{param}}">{{param}}</option>
      </select>
    </label>
    <label ng-show="param" class="item item-input item-select">
      <div class="input-label positive">
        Sets
      </div>
      <select ng-model="childParam">
        <option ng-repeat="param in params" value="{{param}}">{{param}}</option>
      </select>
    </label>
  </script>