title: Cascading parent child select boxes from dynamic JSON data
body: <p>I've created some chained select-boxes dynamically from JSON data which I will receive from server. The chaining/cascading works in a way that every select-box is a named object with following properties:</p>
  
  <ol>
  <li>Parent Attribute: Name of object which is the parent of this select-box object.</li>
  <li><p>Options: Array of option objects, where each object contains: (a) Option Value (b) Parent Option Value - The parent select-box value with which the current value is mapped. (c) Option ID.</p></li>
  <li><p>Selected Option: An object with two properties: (a) Currently selected value (b) ID of currently selected value.</p></li>
  </ol>
  
  <p>I am creating select-boxes using ng-repeat in "option" tag, or using ng-option in "select" tag, and then I am using a custom filter where I filter the retrieved options (2) by matching the parent option value (2 > b) of the option values (2 > a) with the "currently selected value" (3 > a) of its parent object. Basically doing many-to-one mapping from child option values to selected parent value using a custom filter.</p>
  
  <p><a href="https://i.stack.imgur.com/ym2R2.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ym2R2.jpg" alt="enter image description here"></a></p>
  
  <p>I am able to correctly map the parent-child select-boxes, but the issue is when I change the parent select-box value, the "selected option value" of its child object doesn't update (<em>the child selected item doesn't grab the first item in the filtered list, causing the grandchild drop-down to not update.</em>)<sup><a href="https://stackoverflow.com/questions/18723399/cascading-select-dropdowns">[1]</a></sup></p>
  
  <p>Is there any way that if parent value changes, the child select-box (and the subsequent children/grandchildren) is initialized with the <strong>first option value</strong> instead of the current blank value?</p>
  
  <p><a href="https://plnkr.co/edit/l6ZEUe0nP2PekDKipKNa?p=preview" rel="nofollow noreferrer">Here is the working plunker.</a> (ng-repeat implementation). Will really appreciate any help.</p>
  
  <p>Here is the <a href="https://plnkr.co/edit/9WCmupTdm3Zt1pgFgTFu?p=preview" rel="nofollow noreferrer">another plunker</a> with ng-options implementation.</p>
  
  <p><strong>HTML (ng-repeat):</strong></p>
  
  <pre><code>&lt;div ng-repeat="selection in vm.selectionData"&gt;
      &lt;div ng-repeat="(key, attribute) in selection.attributes"&gt;
        &lt;span&gt;{{key}}&lt;/span&gt;
        &lt;select class="form-control" ng-model="attribute.selectedOption.name"&gt;
          &lt;option ng-repeat="option in attribute.options | optionFilter : selection.attributes[attribute.parentAttr]"&gt;{{option.name}}&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>HTML (ng-options):</strong></p>
  
  <pre><code>&lt;div ng-repeat="selection in vm.selectionData"&gt;
      &lt;div ng-repeat="(key, attribute) in selection.attributes"&gt;
        &lt;span&gt;{{key}}&lt;/span&gt;
        &lt;select ng-model="attribute.selectedOption" ng-options="attribute.name for attribute in (attribute.options | optionFilter : selection.attributes[attribute.parentAttr]) track by attribute.id"&gt;
        &lt;/select&gt;
      &lt;/div&gt;        
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>myApp.filter('optionFilter', function() {
    return function(items, parent) {
      var result = [];
      if (parent) {
        for (var i = 0; i &lt; items.length; i++) {
          console.log(items[0].parent, parent.selectedOption.name);
          if (items[i].parent === parent.selectedOption.name) {
            result.push(items[i]);
          }
        }
        return result;
      } else {
        return items;
      }
    }
  });
  
  myApp.controller("MyCtrl", function($scope) {
  
    this.selectionData = [{
      selectionType: "Geography",
      attributes: {
        country: {
          parentAttr: "none",
          options: [{
            name: "India",
            parent: "None",
            id: 1
          }, {
            name: "Bangladesh",
            parent: "None",
            id: 2
          }, {
            name: "Afganistan",
            parent: "None",
            id: 3
          }],
          selectedOption: {
            name: "India",
            id: 1
          }
        },
        state: {
          parentAttr: "country",
          options: [{
            name: "Rajasthan",
            parent: "India",
            id: 1
          }, {
            name: "Haryana",
            parent: "India",
            id: 2
          }, {
            name: "Dhaka",
            parent: "Bangladesh",
            id: 3
          }, {
            name: "Kabul",
            parent: "Afganistan",
            id: 4
          }],
          selectedOption: {
            name: "Rajasthan",
            id: 1
          }
        },
        city: {
          parentAttr: "state",
          options: [{
            name: "Kota",
            parent: "Rajasthan",
            id: 1
          }, {
            name: "Sirsa",
            parent: "Haryana",
            id: 2
          }, {
            name: "Alwar",
            parent: "Rajasthan",
            id: 3
          }, {
            name: "Gurgaon",
            parent: "Haryana",
            id: 4
          }, {
            name: "Kabul",
            parent: "Kabul",
            id: 5
          },{
            name: "Dhaka",
            parent: "Dhaka",
            id: 6
          }
          ],
          selectedOption: {
            name: "Kota",
            id: 1
          }
        }
      },
    }];
  
  });
  </code></pre>
  
  <hr>
  
  <p>References:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/18723399/cascading-select-dropdowns">Cascading select/dropdowns</a></li>
  </ul>