title: How do I populate a multiple select dropdown with JSON data using Materialize and Angularjs?
body: <p>I've seen numerous examples of angularjs using JSON data to populate options in a select dropdown, but after numerous attempts and variations I still end up with a blank dropdown menu. I'm sure there's something wrong with my object naming convention, as all the angular examples are pretty confusing (what's plural? what isn't? etc.) Any help you can offer would be greatly appreciated.</p>
  
  <p>JSON example:</p>
  
  <pre><code>{"fields":[
  {"state": "OH",
   "gender": "male"},
  
  {"state": "OH",
   "gender": "female"},
  
  {"state": "IN",
   "gender": "male"} 
  ]};
  </code></pre>
  
  <p>html:</p>
  
  <pre><code> &lt;div class="input-field col s12 m4" ng-app="totalQuery" ng-controller="queryCtrl"&gt;
          &lt;select multiple&gt;
            &lt;option ng-repeat="fields in myData"&gt;{{fields.state}}&lt;/option&gt;
          &lt;/select&gt;
          &lt;label&gt;First Category&lt;/label&gt;
      &lt;/div&gt;
       &lt;div class="input-field col s12 m4" ng-app="totalQuery" ng-controller="queryCtrl"&gt;
          &lt;select multiple&gt;
            &lt;option ng-repeat="fields in myData"&gt;{{fields.gender}}&lt;/option&gt;
          &lt;/select&gt;
          &lt;label&gt;Second Category&lt;/label&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>angularjs:</p>
  
  <pre><code>&lt;script&gt;
          var app = angular.module('totalQuery', []);
          app.controller('queryCtrl', function($scope, $http){
            $http.get("file.json").then(function(response){
              $scope.myData = response.data.fields;
            });
          });
        &lt;/script&gt;
  </code></pre>