Параметры раскрывающегося списка, не заселяющие JSON

Question

Я пытаюсь взять некоторый JSON и заполнить варианты выпадающего меню. Я использую Materialize фреймворк front-end css, который, я думаю, может быть причиной проблемы здесь. Я говорю об этом, потому что, если я это сделаю с раскрывающимся списком браузера по умолчанию, он работает точно так, как я ожидаю, но не с раскрывающимся списком (Materialize's). Мне нужно запустить раскрывающийся список, когда загружается страница, поэтому, возможно, решение состоит в том, что я должен перезапустить его, но я не знаю, как это сделать.

Это HTML, где форма:

  <div class="row" style="margin-bottom:0px"> 
       <form class="col s12">           <div class="row"> 
         <div class="input-field col s12"> 
          <select ng-options="Country for Country in countries" ng-model="selCountry" ng-change="onChange('sel')"> 
           <option value="" disabled>Select Indicator</option> 
          </select> 

         <label>Indicators</label> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="input-field col s12"> 
          <input id="search_targets" type="text" ng-model="searchText" ng-change="onChange('txt')"> 
          <label for="search_targets">Search Targets</label> 
         </div> 
        </div> 

        <div class="col s12" style=" 
         padding-left: 11.250px; 
         padding-right: 11.250px; 
         margin top:5vh; 
         "> 
         <table> 
          <thead> 
           <tr> 
            <th data-field="id">Name</th> 
            <th data-field="name">Score</th> 
           </tr> 
          </thead> 
          <tbody> 
           <tr data-ng-repeat="item in records | orderBy:'Name':reverse | filter:selCountry | filter:searchText | limitTo: 10"> 
            <td>{{item.Name}}</td> 
            <td>{{item.Country}}</td> 
           </tr> 
          </tbody> 
         </table> 
        </div> 
       </form> 
      </div> 

Это все JS у меня есть, в том числе инициализации выпадающего списка @ внизу:

(function($){ 


    angular.module('myapp', []) 
    .controller('MainCtrl', function($scope, $http) { 
    var records; 
    $scope.selCountry = ''; 
    $scope.searchText = ''; 
    $http.get('http://www.w3schools.com/angular/customers.php').success(function(dt) { 
     //window.alert(angular.toJson(dt)); 

     $scope.countries = []; 
     $scope.records = dt.records; 
     dt.records.forEach(function(o) { 
     var c = o.Country; 
     if ($scope.countries.indexOf(c) == -1) 
      $scope.countries.push(c); 
     }); 
     $scope.total = $scope.countries.length; 
     ready(); 
    }); 

    $scope.matches = 0; 

    $scope.onChange = function(src) { 
     if (src === 'txt') { 
     $scope.selCountry = ''; 
     $scope.search = $scope.searchText; 
     } else { 
     $scope.searchText = ''; 
     $scope.search = $scope.selCountry; 
     } 
     search($scope.search); 
    }; 

    }); 
    $(function(){ 

    $('.button-collapse').sideNav(); 

    }); // end of document ready 

    $('.datepicker').pickadate({ 
    selectMonths: true, // Creates a dropdown to control month 
    selectYears: 15 // Creates a dropdown of 15 years to control year 
    }); 

    $(document).ready(function(){ 
    $('ul.tabs').tabs('select_tab', 'tab_id'); 
    $('select').material_select(); 
    }); 

})(jQuery); // end of jQuery name space 

Если решение для повторной инициализации выпадающего списка после того, как JSON потянут, я не уверен, как это сделать.

Answer 1

В обратном вызове успеха вы должны использовать $scope.$apply, чтобы применить изменения области, так как $http является асинхронным. Затем вы проверили, что dt содержит с console.log(dt)?

Answer 2

Вы можете переинициализировать или обновить выберите элемент путем вызова (как же, как вы INIT)

$('select').material_select(); 

Примечание: Вы должны назвать это заявление вашего успеха обратного вызова.