AngularJS: связь между динамически добавленными контроллерами

Question

Это мой первый пост / вопрос здесь, на Stackru, так что если вы видите какие-либо улучшения, которые я могу сделать - пожалуйста, дайте мне совет:).

Теперь позвольте мне погрузиться в проблему.

Для простоты я удалил все ненужные части кода и представил только необходимые файлы.

//app.modules.js
if (typeof window.app == "undefined") {
  window.app = angular.module("AppModule", []);
}

//app.services.js
window.app
  .service("settingsOverlaySvc", function($rootScope) {
    this.broadcastToggle = function() {
      $rootScope.$broadcast("toggle-conf");
    };
  });

//settings-ctrl.js
window.app.controller("SettingsController", ["$scope", "$window", "$sce", "settingsOverlaySvc",
  function($scope, $window, $sce, settingsOverlaySvc) {
    $scope.visible = false;
    $scope.open = false;

    $scope.toggleSettings = function() {
      $scope.open = !$scope.open;
    };

    $scope.broadcastToggle = function() {
      settingsOverlaySvc.broadcastToggle();
    };

    $scope.$on("toggle-conf", function() {
      console.log("toggle-conf received");
      $scope.visible = !$scope.visible;
    });
  }
]);

angular.bootstrap($("div[ng-controller='SettingsController']").parent(":not(.ng-scope)"), ["AppModule"]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Appended by JS - control1.html -->
<div>
  <div ng-controller="SettingsController" ng-init="visible=true">
    <span class="glyphicon glyphicon-cog" ng-class="{'settings-open': open}" ng-click="broadcastToggle();toggleSettings()">COG</span>
  </div>
</div>

<!-- Appended by JS - control2.html-->
<div>
  <div ng-controller="SettingsController" ng-cloak>
    <div ng-if="visible">
      <span class="glyphicon glyphicon-cog" ng-class="{'settings-open': open}" ng-click="toggleSettings()">COG</span>
      <div ng-if="open">
        <div class="divControl_2">Content_2</div>
      </div>
    </div>
  </div>

</div>

Вышеуказанный фрагмент работает, как я и ожидал - $broadcast вызывается, все контроллеры получают сообщение и реагирует. В моем приложении трансляция принимается только отправляющим контроллером. Я думаю, что проблема вызвана динамическими вставками HTML.

Требуется динамически отображать элементы управления при загрузке страницы. Я использую следующий подход для генерации контента.

AddWidgets: function () {
    var controlContainer1 = $("<section>", {
        class: "sidebar-section",
        id: "ctrl1-container"
    });

    var controlContainer2 = $("<section>", {
        class: "sidebar-section",
        id: "ctrl2-container"
    });

    $("aside.sidebar").append(controlContainer1);
    $("aside.sidebar").append(controlContainer2);

    $("#ctrl1-container").load("..\\assets\\ctrls\\control1.html");
    $("#ctrl2-container").load("..\\assets\\ctrls\\control2.html");
}

Я использую тот же контроллер, потому что он разделяет ту же логику для всех элементов управления.

Я прочитал много материалов о $broadcast а также $emit функциональность, руководства по созданию контроллеров, определения модулей и сервисов (это дает мне представление о создании сервиса с $rootScope впрыскивается).

Теперь я думаю, что генерирование углового контента вне угловой структуры (функция AddWidgets) может вызвать проблему (@stackru/a/15676135/6710729).

То, что подняло мою тревогу чувства паука, - то, когда я проверил пример JSFiddle для подобной ситуации ( http://jsfiddle.net/XqDxG/2342/) - никаких родительских-дочерних отношений контроллеров. Когда я заглядываю в область действия контроллеров, я вижу, что $$nextSibling а также $$prevSibling свойства заполнены. В моем случае это null Эд [ здесь ].

Можете ли вы дать мне несколько советов, как я могу решить мою проблему? Я довольно новичок в AngularJS и учусь, пока занимаюсь разработкой приложения.