Calling functions between directives - angularjs

Question

I am currently building my very first APP using angular and I find myself a bit lost, will appreciate any help regarding the following topic.
I have a single page app with two panels. The left side panel displays a list of items (let's say news), and the right side panel displays the details of any of the available news. I want to be able to click on any of the items listed on the left panel and read the details on the right panel.
A sample HTML/JS code for this model will be as followed (This code will not work as it is):
HTML:
<div id="leftPanel">
<news-list></news-list>
</div>
<div id="rightPanel">
<news-detail></news-detail>
</div>
Javascript/Angular:
var app = angular.module('app', []);
app.directive('newsList', function () {
return{
restrict: 'E',
templateUrl: 'templates/news-list.html',
controller: function ($show) {
$scope.clickAction(item){
data = ....some JSON http request...
showDetail(data);
}
},
controllerAs: 'listing'
};
});
app.directive('newsDetail', function () {
return{
restrict: 'E',
templateUrl: 'templates/news-detail.html',
controller: function ($scope) {
$scope.showDetail(data){
....
}
},
controllerAs: 'detail'
};
});
As you can see, the showDetail() function from newsDetail has to be called from the newsList directive controller above. The click action event is called from the different elements within the news list template.
The question is: ¿How can I call a function within a controller from another controller when inside a directive?
Thanks

Answer 1

It would probably be a better idea for you to declare a controller in a parent element of both newsList and newsDetail . Here's my suggestion:
var app = angular.module('app', []);
app.directive('newsList', function () {
return{
restrict: 'E',
templateUrl: 'templates/news-list.html',
controller: function ($show) {
$scope.clickAction(item){
data = ....some JSON http request...
$scope.showDetail(data);
}
},
controllerAs: 'listing'
};
});
app.directive('newsDetail', function () {
return{
restrict: 'E',
templateUrl: 'templates/news-detail.html',
controllerAs: 'detail'
};
});
app.controller('newsCtrl', function($scope){
$scope.showDetail = function(data){
....
};
});
And nest your directives in the parent element on which you use the ngController directive:
<div ng-controller="newsCtrl">
<div id="leftPanel">
<news-list></news-list>
</div>
<div id="rightPanel">
<news-detail></news-detail>
</div>
</div>

Answer 2

How about trying to add the directive you wanna associate with inside your directive as follows:
var app = angular.module('app', []);
app.directive('newsList', function () {
return{
required: 'newsDetail',
restrict: 'E',
templateUrl: 'templates/news-list.html',
controller: function ($show) {
$scope.clickAction(item){
data = ....some JSON http request...
detail.showDetail(data);
}
},
controllerAs: 'listing'
};
});
app.directive('newsDetail', function () {
return{
restrict: 'E',
templateUrl: 'templates/news-detail.html',
controller: function ($scope) {
$scope.showDetail(data){
....
}
},
controllerAs: 'detail'
};
});