title: Chaining Selects with Angular JS
body: <p>I am brand new, just experimenting, with AngularJS framework. So I am not sure the approach I have taken is the best/right way. </p>
  
  <p>I'm trying to create a 3 level chained ajax filled select boxes, and it is kind of working, except for a couple of issues. </p>
  
  <p>My actual code uses ajax which is in a factory, but for the sake of the fiddle I just have a controller returning results from an array.</p>
  
  <p><strong>Demo (using arrays, not ajax):</strong> <a href="http://jsfiddle.net/xxwe1zu8/1/" rel="nofollow">http://jsfiddle.net/xxwe1zu8/1/</a></p>
  
  <p><strong>Issues:</strong> </p>
  
  <ol>
  <li>2nd and 3rd level selects don't have a "selected" attribute - ie the one you select doesn't get highlighted.</li>
  <li>Ideally I would like the top level categories to be dynamically filled on page load via ajax (or in this example by array) using the same angular function (eg: getSubcategories = function(0, 0) {) rather than hardcoded. Top level categories have a parent of 0.</li>
  <li><p><strong>Bonus</strong>: Can the 3rd select box only be shown/visible if there is a sub sub category returned after selecting the sub category? In reality, most sub categories won't have sub sub categories.</p>
  
  <pre><code>var myAppModule = angular.module('myApp',[]);
  myAppModule.controller('SearchCtrl', function($scope) {
  var self = this;
  
  self.subCategories = [];
  self.getSubcategories = function(parent, level) {
  
      theCategories = [];
  
          angular.forEach(sub_category[parent], function(idx, val) {
               theCategories.push({id: val, name: idx});
          });
  
  
      self.subCategories[level] = theCategories;
  }       
  });
  </code></pre></li>
  </ol>
  
  <p>Thanks</p>