angularjs - 動的角度ディレクティブでの双方向バインディング

Question

したがって、私の目標は、一連のアクティビティを ng-repeat し、アクティビティ タイプに基づいて特定のディレクティブを表示することです。現在、そのアイデアが実行可能かどうかをテストしています。ディレクティブを動的に表示できますが、重要なのは、main.js 内のアクティビティと表示されるディレクティブの間で双方向のバインディングを行うことです。

main.html

<div ng-controller="mainCntrl">
  <div>Activity: { <div>isIncluded: {{activities[0].isIncluded}}</div> }</div>
  <dynamic-directive type="{{activities[0].type}}" attributes="instance='activities[0]'"></dynamic-directive>
</div>

main.js

define(['angularAMD', 'dynamicDirective', 'activity1'],
    function (angularAMD) {
        'use strict';

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

        app.controller('mainCntrl', ['$rootScope', '$scope',
            function ($rootScope, $scope) {
                $scope.activities = [{
                    type: "activity1",
                    isIncluded: true
                }];
            }]);
    });

dynamicDirective.js

define('dynamicDirectiveModule', ['angularAMD'], function (angularAMD) {
    'use strict';
    var app = angular.module('dynamicDirectiveModule', []);

    app.directive('dynamicDirective', ['$compile',
        function ($compile) {
            return {
                restrict: 'E',
                scope: {
                    type: '@',
                    attributes: '@'
                },
                link: function (scope, element) {
                    var generatedDirective = '<' + scope.type + ' ' + scope.attributes + '></' + scope.type + '>';
                    element.append($compile(generatedDirective)(scope));
                }
            };
        }
    ]);
});

activity1.js

define('activity1Module', ['angularAMD'], function (angularAMD) {
    'use strict';
    var app = angular.module('activity1Module', []);

    app.controller('activity1Cntrl', ['$scope',
        function ($scope) {
            console.log("$scope.instance: " + $scope.instance);
            $scope.thisInstance = $scope.instance || {};
        }
    ]);

    app.directive('activity1', [
        function () {
            return {
                restrict: 'E',
                templateUrl: 'processes/templates/Activity1',
                controller: 'activity1Cntrl',
                scope: {
                    instance: '='
                }
            };
        }
    ]);
});

activity1.html

<div>
  <div>ISINCLUDED: {{thisInstance.isIncluded}}</div>
  <button ng-model="thisInstance.isIncluded" value="true">Yes</button>
  <button ng-model="thisInstance.isIncluded" value="false">No</button>
</div>

今の設定だとconsole.logに$scope.instanceが未定義と出力されます。したがって、$scope.thisInstance.isIncluded のデフォルトは false です。main.html でattributes="instance='{{activities[0]}}'"、$scope.thisInstance.isIncluded を正しく true に設定した場合、基本的にポインターとして渡される activities[0] の代わりに、値を渡すため、双方向バインディングはありません。 , { タイプ: "アクティビティ 1", isIncluded: true }. 双方向バインディングを機能させるにはどうすればよいですか? 出来ますか？これを行うより良い方法はありますか？