Accessing controller function in Directive scope - angularjs

Question

I am trying to access the function defined in the controller scope from directive nested in another directive. I am using the "&" and passing the function name as the attribute to the directive, however I am still not able to reach the function in the controller scope.
Could some one correct where I am going wrong? I had spent few hours trying to find that I have to use the "&" for reaching controller scope but stuck here after whatever I did.
JSFiddle here - http://jsfiddle.net/fwR9Q/12/
Code:
<div ng-controller="PlayerCtrl">
<div class="col-md-4 col-sm-6 col-xs-12" ng-repeat="video in videos" >
<tf-video src="{{video.src}}" width="{{video.width}}" handleClick="playVideo(videoId, modeNum)" height="{{video.height}}" title="{{video.title}}"/>
</div>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('PlayerCtrl',
function PlayerCtrl($scope,$log, trailers)
{
$scope.videos = trailers;
$scope.playVideo = function(videoId, modeNum){
alert("video Id = " + videoId + "; mode Num = " + modeNum);
return false;
};
}
);
myApp.directive('tfVideo', function() {
return{
restrict: 'AE',
scope: {
src: '#',
handleClick: '&',
width: '#width',
height: '#height'
},
template: '<img src="http://img.youtube.com/vi/{{src}}/0.jpg" height="{{height}}" width="{{width}}"/>'
};
});
myApp.factory('trailers', function(){
var trailerVideos = [
{
src:"6kw1UVovByw",
width:"324",
height:"300"
},
{
src:"uWgDVz4NEO4",
width:"324",
height:"300"
}
];
return trailerVideos;
});
</script>
Thank you

Answer 1

1) On your directive declaration:
<tf-video src="{{video.src}}" width="{{video.width}}" handleClick="playVideo(videoId, modeNum)" height="{{video.height}}" title="{{video.title}}"/>
Since attributes use the snake-cased form.
Instead of: handleClick=
You want the snake cased: handle-click=
2) In your template:
template: '<img src="http://img.youtube.com/vi/{{src}}/0.jpg" height="{{height}}" width="{{width}}"/>'
Instead of: {videoId: {{src}}, modeId: modeNum{{$parent.$index}} }
You want: {videoId: src, modeNum: $parent.$index }
Since you need the "modeNum" parameter name to match between the template and the directive and you want to map directly to the variables, not expressions.
Updated fiddle