JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="MyCtrl">
      <my-directive data-ng-repeat="field in Fields" data-field-info="field" data-field-data="FieldData">
    </my-directive>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.directive('myDirective', function ($compile) {
    return {
        template: "<div> <label>{{Field.Name}} <div id='{{Field.Name}}_Container'></div> </label></div>",
        replace: true,
        restrict: 'AE',
        scope: {
            Field: "=fieldInfo",
            FieldData:"="
        },
        link: function (scope, element, attr) {
            var input = "<input type='" + scope.Field.Type + "' data-ng-model='FieldData[" + scope.Field.Name + "]' />";
            var html = $compile(input)(scope);
            element.find('div').append(html);
        }
    }
});

function MyCtrl($scope) {
    $scope.Fields = [
      { Name: "field1", Type: "text", Data:'12' },
      { Name: "field2", Type: "number", Data:'321' }
    ];
  
  $scope.FieldData = {}; //{fieldname: fielddata}
}