angularjs custom form and field directive: ngModelController is not found in FormController -

i have 2 directives, 1 my-form, 1 my-field.
i need use mode of dynamically creating html content both of these 2 directives.

works except can not ngmodelcontroller of input fields.
can not $dirty, $valid properties of these fields. example, when submitting, want ngmodelcontroller of input name "field1", can not it.
form.field1 undefined.
in formcontroller "form1", there no field, 1 can on this?
many thanks

the code in fiddle is: https://jsfiddle.net/0td5hlur/3/

main codes listed below:

angular.module('myapp', [])                  .controller('mycontroller', ['$scope', function ($scope) {                      $scope.config = {                          name: 'form1',                          fields: [                              {type: 'text', name: 'field1', model: 'obj.field1'},                              {type: 'text', name: 'field2', model: 'obj.field2'}                          ]                      };                  }])                  .directive('myform', ['$compile', function($compile) {                      return {                          restrict: 'e',                          replace: true,                          scope: {                              config: '='                          },                          compile: function(element, attrs, transclude) {                              return {                                  pre: function (scope, ielement, iattrs, controller) {                                      console.log('-------myform');                                      var html = '<form name="{{config.name}}">' +                                              '   <my-field ng-repeat="item in config.fields" config="item"></my-field>' +                                              '    <button ng-click="submit()">submit</button>' +                                              '</form>';                                      ielement.append($compile(html)(scope));                                      scope.obj = {                                          field1: '1',                                          field2: '2'                                      };                                      scope.submit = function () {                                          var form = scope[scope.config.name];                                          console.log(form);                                          alert(form.field1);                                          alert(form.field1.$dirty);        // error here                                      }                                  }                              };                          }                      }                      }])                          .directive('myfield', ['$compile', function($compile) {                              return {                                  restrict: 'e',                                  replace: true,                                  scope: {                                      config: '='                                  },                                  compile: function(telement, tattrs, transclude) {                                      return {                                          pre: function(scope, ielement, iattrs, controller) {                                              var config = scope.config;                                              var html = '<input type="' + config.type + '" ng-model="' + config.model + '" name="' + config.name + '" />';                                              ielement.after($compile(html)(scope.$parent));                                              ielement.remove();                                          }                                      }                                  }                              }                          }])          ;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="myapp" ng-controller="mycontroller">      <my-form config="config"></my-form>  </div>

i tried out myself, modified several lines not easy job.
final working codes below:

missed below lines:
ielement.after(html);
var element = ielement.next();
ielement.remove();
$compile(element)(scope.$parent);

angular.module('myapp', [])  .controller('mycontroller', ['$scope', function ($scope) {    $scope.config = {      name: 'form1',      fields: [        {type: 'text', name: 'field1', model: 'obj.field1'},        {type: 'text', name: 'field2', model: 'obj.field2'}      ]    };  }])  .directive('myform', ['$compile', function($compile) {    return {      restrict: 'e',      replace: true,      scope: {        config: '='      },      link: function (scope, ielement, iattrs, controller) {        console.log('-------myform');        var html = '<form name="{{config.name}}">' +            '   <my-field ng-repeat="item in config.fields" config="item"></my-field>' +            '    <button ng-click="submit()">submit</button>' +            '</form>';        ielement.append($compile(html)(scope));        scope.obj = {          field1: '1',          field2: '2'        };        scope.submit = function () {          var form = scope[scope.config.name];          console.log(form);          alert(form.field1);          alert(form.field1.$dirty);        // error here        }      }    }  }])  .directive('myfield', ['$compile', function($compile) {    return {      restrict: 'e',      replace: true,      scope: {        config: '='      },      link: function(scope, ielement, iattrs, controller) {        var config = scope.config;        var html = '<input type="' + config.type + '" ng-model="' + config.model + '" name="' + config.name + '" />';        ielement.after(html);        var element = ielement.next();        ielement.remove();        $compile(element)(scope.$parent);      }    }  }])          ;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="myapp" ng-controller="mycontroller">      <my-form config="config"></my-form>  </div>