title: Cascading select in Angular 1.x from Single JSON source
body: <p>I am trying to implement cascading <code>&lt;select&gt;</code> in angular from some json data.</p>
  
  <p>Basically as soon as user selects a director then the movies dropdown is populated with that directors films.</p>
  
  <p>However I am not sure how to access the set of childitems for a director in the json in the ng-repeat for the movies <code>&lt;select&gt;</code></p>
  
  <p>The selects are as follows. The first dropdown is populated on load with all director's id and name</p>
  
  <pre><code>&lt;select name="directors" id="directors" ng-model="searchFilter.directorId"&gt;
      &lt;option ng-repeat="item in directors" value="{{item.id}}"&gt;{{item.name}}&lt;/option&gt;
  &lt;/select&gt;
  &lt;select name="movies" id="movies" ng-disabled="!searchFilter.movieId" ng-model="searchFilter.movieId"&gt;
      &lt;option ng-repeat="item in directors.childItems" value="{{item.id}}"&gt;{{item.name}}&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>The json is </p>
  
  <pre><code>[{
          "childItems": [{
                  "childItems": null,
                  "id": 3,
                  "name": "Star Wars"
              }
          ],
          "id": 168,
          "name": "George Lucas"
      }, {
          "childItems": [{
                  "childItems": null,
                  "id": 10,
                  "name": "The Hobbit"
              }, {
                  "childItems": null,
                  "id": 11,
                  "name": "The Return of the King"
              }, {
                  "childItems": null,
                  "id": 30,
                  "name": "Fellowship of the Ring"
              }
          ],
          "id": 170,
          "name": "Peter Jackson"
      }, {
          "childItems": [{
                  "childItems": null,
                  "id": 3,
                  "name": "Blade Runner"
              }
          ],
          "id": 167,
          "name": "Ridley Scott"
      }, {
          "childItems": [{
                  "childItems": null,
                  "id": 3,
                  "name": "2001 A Space Odyssey"
              }
          ],
          "id": 279,
          "name": "Stanley Kubrick"
      }, {
          "childItems": [{
                  "childItems": null,
                  "id": 3,
                  "name": "Manhattan"
              }
          ],
          "id": 169,
          "name": "Woody Allen"
      }
  ]
  </code></pre>
  
  <p>Can anybody help?</p>