angularjs - AngularJS: ネストされたフォーム (ngForm) をプログラムで追加する

Question

angularで構築されたフォームにネストされたフォームを追加する必要があるという特定の問題があります。

静的に (非プログラム的に)、次のことができます。

<form>
   ...
   <ng-form>
       <input ng-model="myModel" required>
   </ng-form>
   ...  
</form>

また、ネストされたフォームの検証エラーは、外側のフォームを無効にします。これはまさに私が必要とするものです。

しかし、ディレクティブを介してプログラムでこれを行うことはできないようです。テンプレートには次のものがあります

<div dynamic-nested-form="">

</div>

そして、私は次のものを持っています：

(function () {

angular
    .module('controls')
    .directive('dynamicNestedForm', dynamicNestedForm);

function dynamicNestedForm($compile) {
    return {
        restrict: 'A',

        link: linkedFunction
    };

    function linkedFunction($scope, element) {

        var nestedForm = angular.element('<ng-form><input ng-model="myModel" required></ng-form>');
        element.append($compile(nestedForm)($scope));
   }
})();

フォームは DOM に挿入され、Chrome 要素ビューでは無効な状態になっています。

<div dynamic-nested-form="" class="ng-scope">

    <ng-form 
        class="ng-pristine ng-scope ng-invalid ng-invalid-required">      
        <input ng-model="myModel" required="" 
               class="ng-pristine ng-untouched ng-invalid ng-invalid-required">
    </ng-form>
</div>

ただし、外側のフォームは無効になりません。外側のフォームが読み込まれると、内側のフォームが表示されませんか?

私は何を間違っていますか？