title: Dynamically create multiple dropdowns angularjs from a single JSON file
body: <p>I have a list of categoryTypes and each categoryType has a list of categories within them and i am displaying them in a dropdown which the user can select multiple items from and the choices made will filter what apps are shown in the view (this is an inhouse appstore)</p>
  
  <p>This is the JSON file im working with.</p>
  
  <blockquote>
    <p>[{"type":"category","id":1181,"categoryType":{"id":1180,"name":"Technology"},"name":"Spotfire"},{"type":"category","id":1182,"categoryType":{"id":1180,"name":"Technology"},"name":"PipelinP"},{"type":"category","id":1184,"categoryType":{"id":1183,"name":"Category"},"name":"IBSI"},{"type":"category","id":1185,"categoryType":{"id":1183,"name":"Category"},"name":"Clin"},{"type":"category","id":1187,"categoryType":{"id":1186,"name":"Capability"},"name":"Chemistry"},{"type":"category","id":1188,"categoryType":{"id":1183,"name":"Category"},"name":"Key
    Opinion
    Leaders"},{"type":"category","id":1189,"categoryType":{"id":1183,"name":"Category"},"name":"Pnts"},{"type":"category","id":1190,"categoryType":{"id":1183,"name":"Category"},"name":"CI"},{"type":"category","id":1191,"categoryType":{"id":1180,"name":"Technology"},"name":"VantageP"},{"type":"category","id":1192,"categoryType":{"id":1183,"name":"Category"},"name":"Targets"},{"type":"category","id":1193,"categoryType":{"id":1186,"name":"Capability"},"name":"Information
    Science"},{"type":"category","id":1194,"categoryType":{"id":1186,"name":"Capability"},"name":"DMP"},{"type":"category","id":1195,"categoryType":{"id":1180,"name":"Technology"},"name":"Spotfire
    Web
    Player"},{"type":"category","id":1196,"categoryType":{"id":1186,"name":"Capability"},"name":"PredictiveS"},{"type":"category","id":1198,"categoryType":{"id":1197,"name":"Function"},"name":"PharmD"},{"type":"category","id":1199,"categoryType":{"id":1197,"name":"Function"},"name":"iM
    - CV/GI"},{"type":"category","id":1200,"categoryType":{"id":1180,"name":"Technology"},"name":"Mobile
    Apps"},{"type":"category","id":1201,"categoryType":{"id":1197,"name":"Function"},"name":"RAPIDE"},{"type":"category","id":1202,"categoryType":{"id":1197,"name":"Function"},"name":"iM
    - Oncology"},{"type":"category","id":1203,"categoryType":{"id":1186,"name":"Capability"},"name":"Clin"}]</p>
  </blockquote>
  
  <p>But because an admin can add categoryTypes and categories to any type the dropdowns need to be dynamically created as they were hard coded. There needs to be a new dropdown for each Category Type.</p>
  
  <p>So what i was able to do was have all categories shown in one dropdown grouped by category type with this;</p>
  
  <pre><code>&lt;select class="form-control"  multiple class="span4 chzn-select" chosen="myCategories" data-placeholder=" "  ng-model="c"  ng-options="c.name group by c.categoryType.name for c in myCategories"&gt;
  </code></pre>
  
  <p>I created the factory to get the categories;</p>
  
  <pre><code>.factory('categoryFactory', function ($resource) {
          return $resource(
                  '/resources/appstore/categories'  
          );
      })
  </code></pre>
  
  <p>The controller looks like this;</p>
  
  <pre><code>$scope.myCategories = [];
  
    categoryFactory.query(function (d) {
              $scope.myCategories = d;
          });
  </code></pre>
  
  <p>So for example take the first line of the JSON.</p>
  
  <p>The  the category of 'Spotfire' is in the categoryType 'Technology'.</p>
  
  <p>So for that categorytype i would need the dropdown of technology which shows at least spotfire + whatever else is parsed in the JSON file being in that categoryType. </p>
  
  <p>Then another dropdown for the next categoryType and so on.</p>