Применение стилей оформления материала AngularJS к динамически создаваемым элементам

Question

У меня есть приложение AngularJS, где у меня есть требование динамически добавлять AngularJS компоненты материала. Я использую Jquery, чтобы сделать это с помощью нажатия кнопки.

Компоненты добавляются в макет, но стили к нему не применяются.

Но есть и другие компоненты, которые загружаются при загрузке страницы, выглядит вполне нормально.

Может кто-нибудь помочь мне с этим вопросом? Спасибо.

Вот мой код jquery.

$(document).ready(function(){
    var counter = $('#contactNum').val();
    $('#addEmergencyContact').click(function() {
        counter++;
        $('#contactNum').text(counter);
    $(this).before('<div class="card-body pt-0">
<div class="row">
    <div class="col-md-12">
        <md-input-container class="md-block mx-4 mt-4" flex-gt-sm>
            <label>First name</label>
            <input type="text" name="firstname" id="firstname" ng-model="emergency_firstname" autocomplete="off" >
        </md-input-container>
        <md-input-container class="md-block mx-4 mt-3" flex-gt-sm>
            <label>Surname</label>
            <input type="text" name="lastname" id="lastname" ng-model="emergency_lastname" autocomplete="off" >
        </md-input-container><md-input-container class="md-block mx-4 mt-3" flex-gt-sm>
            <label>Email</label>
            <input type="text" name="email" id="email" ng-model="emergency_email" autocomplete="off" >
        </md-input-container>
        <md-input-container class="md-block mx-4 mt-3" flex-gt-sm>
            <label>Phone Number</label>
            <input type="text" name="phone" id="phone" ng-model="emergency_phone" autocomplete="off" >
        </md-input-container>
        <md-input-container class="md-block mx-4 mt-3" md-theme="altTheme1"  flex-gt-sm>
            <label>Relationship to you</label>
            <md-select ng-model="relation" placeholder="Relationship" ng-selected="get_Selected_relation()" >
                <md-option value="Spouse">Spouse</md-option>
                <md-option value="Partner">Partner</md-option>
                <md-option value="Parent">Parent</md-option>
                <md-option value="Friend">Friend</md-option>
            </md-select>
        </md-input-container>
    </div>
</div>
    <button id="removeEmergencyContact">Remove Contact</button> 
  </div>');
  });

    $(document).on('click','#removeEmergencyContact',function() {
        counter--;
        $('#contactNum').text(counter);
    $(this).parent('div').remove();
    });  
});

Вот мой код AngularJS

var app = angular.module('myApp', ['ngMaterial', 'ngMessages']);
app.controller('ParticipantController', function($scope) {

});

На данный момент я ничего не написал для установки значений для компонентов AngularJS. Так что это пусто.

Вот изображение

Верхняя часть изображения отображается при загрузке, а нижняя часть изображения загружается при нажатии кнопки добавления.