Зачем нужен $timeout при динамическом вложении ng-формы в Angular, чтобы обеспечить связь дочерней формы с родительской формой?

Как сказал Майкл, правильным местом для любых манипуляций с DOM является функция link, а не функция controller директивы. Некоторая дополнительная информация о том, почему то, что у вас уже есть, работает/не работает в зависимости от использования $timeout:

Согласно документации Angular $compile сервиса для определений директив контроллер

Манипуляции с DOM должны выполняться на этапе link, а не на этапе controller. См. раздел $compile.

Функция ссылки отвечает за регистрацию прослушивателей DOM, а также за обновление DOM. Он выполняется после того, как шаблон был клонирован. Именно здесь будет размещена большая часть директивной логики.

Детальное объяснение:

Проблема заключается в угловом FormController. При инициализации он будет искать экземпляр родительского form контроллера. Поскольку подчиненная форма была создана на этапе контроллера, инициализация родительской формы не была завершена. Подформа не найдет родительский контроллер и не сможет зарегистрироваться в качестве подчиненного элемента управления.

FromController.js

//asks for $scope to fool the BC controller module
FormController.$inject = ['$element', '$attrs', '$scope', '$animate', '$interpolate'];
function FormController(element, attrs, $scope, $animate, $interpolate) {
  var form = this,
      controls = [];

  var parentForm = form.$$parentForm = element.parent().controller('form') || nullFormCtrl;

Плункер

Обычно изменение элементов dom внутри контроллера обычно не идеально. Вы должны быть в состоянии достичь того, что ищете, без необходимости «$ compile» и немного упростить работу, если вы введете вторую директиву массив элементов для использования «ng-repeat». Я предполагаю, что $timeout() работает, чтобы сигнализировать angular о новых элементах и ​​заставляет цикл дайджеста обрабатывать правильную проверку.

var app = angular.module('app',[]);
app.directive('childForm', function(){
  return{
    restrict: 'E"',
    scope:{
      name:"="
    },
    template:[
                '<div ng-form name="form2">',
                    '<div>Dynamically added sub form</div>',
                    '<input type="text" name="input1" required ng-model="name"/>',
                    '<button ng-click="name=\'\'">CLEAR</button>',
                '</div>'
              ].join('')

  }
});
app.directive('myTest', function() {

    return {

        restrict: 'E',

        scope: {},

        controller: function ($scope, $element, $compile, $timeout) {
          $scope.items = [];
          $scope.items.push({
            name:'myname'
          });
          $scope.name = 'test';
            $scope.onClick = function () {
                console.log("SCOPE:", $scope, $childScope);
            };
            $scope.addItem = function(){
              $scope.items.push({name:''});
            }
        },

        template: [
            '<div>',
              '<div>Parent Form</div>',
              '<div ng-form name="form1">',

                  '<div class="form-container">',
                    '<div ng-repeat="item in items">',
                      '<child-form/ name="item.name">',
                    '</div>',
                  '</div>',

                  '<div>Existing sub form on parent scope</div>',
                  '<div ng-form name="form3">',
                    '<input type="text" name="input2" required ng-model="name"/>',
                    '<button ng-click="name=\'\'">CLEAR</button>',
                  '</div>',
              '</div>',
              '<button ng-click="addItem()">Add Form</button>',
              '<button ng-click="onClick()">Console Out Scopes</button>',
            '</div>'
        ].join('')
    };
});

Обновлен plunkr