Создать угловую форму материала с помощью JavaScript

Question

Я пытаюсь динамически создать форму, используя JavaScript и англоязычный материал. Элементы созданы правильно, но пользовательский интерфейс не соответствует элементам, созданным на странице HTML.

Ниже приведен код, который генерирует разметку HTML для элементов:

$scope.elements = [{
    label: "username",
    value: "test"
}, {
    label: "password",
    value: "test"
}];

$scope.fields = [];
for (var f = 0; f < $scope.elements.length; f++) {
    var e = $scope.elements[f];
    var label = "<label>" + e.label + ": * </label>";
    var input = "<input id='test_" + f + "' value='" + e.value + "'/>";
    var tmp = label.concat(input);
    $scope.fields.push($sce.trustAsHtml(tmp));
}

Я связываю $scope.fields в HTML с помощью ng-bind-html,

 <md-input-container ng-repeat="field in fields" ng-bind-html="field" >
 </md-input-container>

Есть что-то, что я пропускаю или должен добавить, чтобы иметь то же представление пользовательского интерфейса, что и статический HTML.

Вот ссылка на JSFiddle, которая воспроизводит вышеупомянутое поведение: https://jsfiddle.net/prerak6962/fxwmda5w/6/