Select not rendering in Materialize CSS and AngularJS

Question

I am using Materialize CSS for my Angular application and for some reason, the <select> element fails to render (nothing visible; though when I right click to inspect element, I can see the <select> right there). However, when I apply class = "browser-default" to it, it starts working. As in a previous answer, I have also included

$(document).ready(function() {
    $('select').material_select();
});

after loading all js files. Yet, it doesn't seem to work. Any idea what the possible issue can be?

Edit: Here's the related documnetation: http://materializecss.com/forms.html

Answer 1

As in the answer found in: Materialize CSS - Select Doesn't Seem to Render

You have to initialize the select using the JS code:

$(document).ready(function() {
    // Select - Single
    $('select:not([multiple])').material_select();
});

Answer 2

You need to call $('select').material_select(); after angular to load your select, for example:

you have a select like this:

<div class="input-field col s12">
    <select ng-model="year" ng-options="year for year in years">
        <option value="" disabled selected>Select a year</option>
    </select>
    <label>Year</label>
</div>

When you are loading the list of years in your controller, you must use setTimeout to delay execution of the method $('select').material_select() . See below:

function generateYears() {
    var years = [];
    var currentYear = new Date().getFullYear();
    for (var year = currentYear; year >= 1900; year--) {
        years.push(year);
    }

    $scope.years = years;

    setTimeout(function () {
        $('select').material_select();
    }, 200);
}

With this the materialize select will work