How do I initialize <select> using MaterializeCSS and AngularJS combined?

Question

I've been trying to add a simple < select > snippet to my page, but as I discovered in this answer, MaterializeCSS starts off by disabling it, and then re-enables (I'm assuming) once the correct jQuery plugin has been loaded (using directives, as shown by this answer)

I have not been able to find a good example on how to do this using AngularJS, and I would like to avoid moving to an angular-designed fork of Materialize if possible.

Here's what I got.

<label>
    test
    <select material-select>
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
    </select>
</label>

I am planning to make a directive that initializes the < select >, then I'll use ng-repeat to populate it afterwards.

navApp.directive('myDropDown', function() {
    return {
        //This code is broken, I am not quite sure what I'm doing.
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).'select'.material_select();
        }
    };
}); 

I consider myself a novice at ASP.NET MVC, Entity Frameworks (using MySQL) and AngularJS, which are all the frameworks I'm currently using.

I also found this resource on creating directives, but I am not sure how to adapt it to my situation.

I'd be deeply grateful for any help on this.

Answer 1

$(element).'select'.material_select();

What should be the result of this statement? The .'select' is no JS syntax.

try:

$(element).material_select(); // if the element is already the select element

or:

$(element).find('select').material_select(); // find a child select of the element