mdb-select not working in Modal

Hi Xercister,

Thanks for reaching out! Could you provide the code you're working on? I know from experience that the number one reason for material select trouble is its improper initialization or lack of thereof. It's worth noting that MDB CSS hides all select fields by default, to have them initialized in their Material Design form by MDB JS magic - just so you know.

With Best Regards,
Kuba

So here is what I am doing.

Start your code here
<script type="text/ng-template" id="AddClient.html">
 <div class="modal-dialog cascading-modal" role="document">
 <!--Content-->
 <div class="modal-content">
 <!--Header-->
 <div class="modal-header light-blue darken-3 white-text">
 <h4 class="title"><i class="fa fa-user-plus"></i> Add Client</h4>
 <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close" ng-click="Close()">
 <span aria-hidden="true">&times;</span>
 </button>
 </div>
 <!--Body-->
 <div class="modal-body mb-0">
 <form name="formAddClient" ng-submit="addNewClient(formAddClient.$valid)" novalidate>
 <div class="md-form form-sm">
 <div class="col-12 d-flex justify-content-center">
 <div class="col-8">
 <i class="fa fa-user prefix"></i>
 <input type="text" id="defaultForm-cname" class="form-control validate" ng-model="newClient.ClientName" required>
 <label data-error="wrong" for="defaultForm-cname">Client Name</label>
 </div>
 <div class="col-4"></div>
 </div>
 </div>
 <div class="md-form form-sm">
 <div class="col-12 d-flex justify-content-center">
 <div class="col-8">
 <i class="fa fa-user prefix"></i>
 <select class="mdb-select">
 <option value="" disabled selected>Choose your option</option>
 <option value="1">Option 1</option>
 <option value="2">Option 2</option>
 <option value="3">Option 3</option>
 </select>
 <label>Example label</label>
 </div>
 <div class="col-4"></div>
</div>
</div>
<div class="text-center mt-1-half">
<input type="submit" class="btn btn-outline-primary waves-effect" value="Add Client" />
</div>
</form>
</div>
<!--Body-->
</div>
<!--/.Content-->
</div>
</script>

I do understand that the item must be initialized and I have done so with the following code. I've moved it all over the place just to make sure that my placement wasn't the problem.

Start your code here
 <script>
 // Material Select Initialization
 $(document).ready(function () {
 $('.mdb-select').material_select();
 });
 </script>