title: Cant get Select Box to update dynamically with angular.js
body: <p>I am currently learning angularJS and so far so good, but I'm having a problem that I cant seem to figure out.</p>
  
  <p>I have 2 select boxes, one with top level categories in it, and a second one for sub-categories which is supposed to dynamically update when a change is made to the first select.</p>
  
  <p>The first select box is populating fine, but despite the values being set for the second binding array by the event function I developed, the view never updates the second select box with the new values. I'm not sure what I'm doing wrong, and have tried a bunch of things but with no luck.</p>
  
  <p>Here is what I've got:</p>
  
  <pre><code>var themebucketApp = angular.module('themebucketApp',[]);
  
  //category list controller
  themebucketApp.controller('CategoriesOptions',function($scope) {
  
      $scope.thememap = {"wordpress":[{"category":"Activism"},{"category":"Art"},{"category":"Blog \/ Magazine"},{"category":"BuddyPress"},{"category":"Business"},{"category":"Cart66"},{"category":"Charity"},{"category":"Children"},{"category":"Churches"},{"category":"Computer"},{"category":"Corporate"},{"category":"Creative"},{"category":"eCommerce"},{"category":"Entertainment"},{"category":"Environmental"},{"category":"Events"},{"category":"Experimental"},{"category":"Fashion"},{"category":"Film &amp; TV"},{"category":"Food"},{"category":"Government"},{"category":"Health &amp; Beauty"},{"category":"Hosting"},{"category":"Jigoshop"},{"category":"Marketing"},{"category":"Miscellaneous"},{"category":"Mobile"},{"category":"Music and Bands"},{"category":"News \/ Editorial"},{"category":"Nightlife"},{"category":"Nonprofit"},{"category":"Personal"},{"category":"Photography"},{"category":"Political"},{"category":"Portfolio"},{"category":"Restaurants &amp; Cafes"},{"category":"Retail"},{"category":"Shopping"},{"category":"Software"},{"category":"Technology"},{"category":"Travel"},{"category":"Wedding"},{"category":"WooCommerce"},{"category":"WordPress"},{"category":"WP e-Commerce"}],"magento":[{"category":"Entertainment"},{"category":"Fashion"},{"category":"Health &amp; Beauty"},{"category":"Magento"},{"category":"Miscellaneous"},{"category":"Shopping"},{"category":"Technology"}],"designs":[{"category":"404 Pages"},{"category":"Activism"},{"category":"Admin Templates"},{"category":"Art"},{"category":"Business"},{"category":"Charity"},{"category":"Children"},{"category":"Churches"},{"category":"Computer"},{"category":"Corporate"},{"category":"Creative"},{"category":"Electronics"},{"category":"Entertainment"},{"category":"Environmental"},{"category":"Events"},{"category":"Experimental"},{"category":"Fashion"},{"category":"Film &amp; TV"},{"category":"Food"},{"category":"Government"},{"category":"Health &amp; Beauty"},{"category":"Hosting"},{"category":"Marketing"},{"category":"Miscellaneous"},{"category":"Mobile"},{"category":"Music and Bands"},{"category":"Nightlife"},{"category":"Nonprofit"},{"category":"Personal"},{"category":"Photo Gallery"},{"category":"Photography"},{"category":"Political"},{"category":"Portfolio"},{"category":"Restaurants &amp; Cafes"},{"category":"Resume \/ CV"},{"category":"Retail"},{"category":"Shopping"},{"category":"Site Templates"},{"category":"Social Media Home"},{"category":"Software"},{"category":"Specialty Pages"},{"category":"Technology"},{"category":"Travel"},{"category":"Under Construction"},{"category":"Virtual Business Card"},{"category":"Wedding"}],"opencart":[{"category":"Entertainment"},{"category":"Fashion"},{"category":"Miscellaneous"},{"category":"OpenCart"},{"category":"Shopping"},{"category":"Technology"}]};
  
      $scope.categories  = [{'name' : 'WordPress', 'value' : 'wordpress'},{'name' : 'Magento', 'value' : 'magento'},{'name' : 'OpenCart', 'value' : 'opencart'},{'name' : 'Designs', 'value' : 'designs'}];
  
      $scope.subcategories = [];
  
      $scope.loadSubcategories = function(){
          $scope.subcategories = $scope.thememap[$('#theme-type').val()];
      };
  
  });
  </code></pre>
  
  <p>...</p>
  
  <pre><code>&lt;div class="navbar-text pull-right" style="margin-top:10px;"&gt;
      &lt;select id="theme-type" name="themetype" ng-controller="CategoriesOptions" ng-click="loadSubcategories();"&gt;
          &lt;option value=""&gt;Theme Type&lt;/option&gt;
          &lt;option ng-repeat='category in categories' value="{{category.value}}"&gt;{{category.name}}&lt;/option&gt;
      &lt;/select&gt;
      &lt;select id="theme-cat" name="themecat" ng-controller='CategoriesOptions'&gt;
          &lt;option value="All"&gt;All&lt;/option&gt;
          &lt;option ng-repeat='subcategory in subcategories' value='{{subcategory.category}}'&gt;{{subcategory.category}}&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Can anyone show me what I'm doing wrong or what I'm missing?</p>