Для связи между контроллерами или директивами вы должны использовать услуги.
Из угловой направляющей (https://docs.angularjs.org/guide/services):
Угловые услуги взаимозаменяемы объекты, которые соединены вместе с помощью инъекции зависимостей (DI). Вы можете использовать службы для организации и совместного использования кода в своем приложении.
Я проверил код, который вы опубликовали на jsfiddle (http://jsfiddle.net/4kjjyL4s/4/), и я старался максимально использовать его. Ниже перечислены мои изменения в файле JavaScript (пожалуйста, прочитайте комментарии в коде).
var app = angular.module("app",[]);
app.controller('main', function(){});
// The service will be responsible for the shared objects and logic
app.service('MenuService', function() {
var list = [
{
name: "Menu1", link: "#menu1",
submenu: [
{ name: "Menu1Sub1", link: "#submenu1" },
{ name: "Menu1Sub2", link: "#submenu2" }
]
},
{
name: "Menu2", link: "#menu2",
submenu: [
{ name: "Menu2Sub1", link: "#submenu1" },
{ name: "Menu2Sub2", link: "#submenu2" }
]
}
];
var selected = [];
// methods and attributes published under the **this**
// keyword will be publicly available
this.getMenu = function() {
return list;
};
this.getSubmenu = function() {
return selected;
};
this.select = function (menuItem) {
// this does the *trick*!
// if we use the assignment operator here, we would replace the
// reference returned in the getSubmenu() method, so as the original
// reference did not change, angular's dirty checking would not detect it.
// using angular.copy() method, we are copying the contents of the
// selected submenu over the same reference returned by getSubmenu()
angular.copy(menuItem.submenu, selected);
};
});
// No $rootScope injection results in better re-usability. When you were
// relying in $rootScope sharing, both directives should live in the
// $rootScope, so if you add them inside a ng-controller created scope
// they would not work anymore
app.directive("menu", function() {
return {
restrict: "E",
// no need to isolate scope here, *scope:true* creates a new scope
// which inherits from the current scope
scope: true,
// with controllerAs (introduced in angular 1.2), you can skip
// polluting the scope injection.
controllerAs: "ctrl",
controller: function(MenuService) {
this.list = MenuService.getMenu();
this.changeSub = function (menuItem) { MenuService.select(menuItem); };
},
template: "<div ng-repeat='menu in ctrl.list'><button ng-click='ctrl.changeSub(menu)'>{{menu.name}}</button></div>"
};
});
app.directive("submenu", function() {
return {
restrict: "E",
scope: true,
controllerAs: "ctrl",
controller: function(MenuService) {
this.sublist = MenuService.getSubmenu();
},
template: "<span ng-repeat='menu in ctrl.sublist'>{{menu.name}} | </span>aa"
};
});
А вот обновленный HTML-файл, просто чтобы показать обе директивы теперь работать не напрямую вставляются в $rootScope
<div ng-app="app">
<div ng-controller="main">
<menu></menu>
<h1>Hello World!</h1>
<div class="main-content">
<submenu></submenu>
</div>
</div>
</div>
Надеются, что это помогает!