Invoke function inside a controller from Fancybox2 - angularjs

Question

I have this directive
app.directive('fancybox', function($compile, $timeout){
return {
link: function($scope, element, attrs){
$(element).fancybox({
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'width': '250',
'height': '250',
'speedIn': 600,
'speedOut': 200,
'overlayShow': false,
afterLoad: function () {
$timeout(function(){
$compile($("#content-popup"))($scope);
$scope.$apply();
$.fancybox.resize();
})
this.title = $(this.element).next('.content-popup-footer').html();
},
helpers: {
title: {
type: 'inside'
}
},
});
}
}
});
I'm trying to invoke a function that is inside the controller that invoked the fancybox. This is the html that i'm sending to the fancybox
<a href="{{content.source}}" fancybox="fancybox" id="content-popup"
class="transparent-box content-popup content-picture-container"
rel="campaign-picture-popup" "><a/>
<!--Fancybox footer data begin-->
<div class="content-popup-footer" style="display:none">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="content-popup-user-info">
<img class="content_picture_profile_pic"
ng-src="{{content.photographer.instagramProfilePicture}}"/>
<div class="content_popup_user_name">
{{content.photographer.instagramUserName}}
</div>
<i class="fa fa-circle small-dot"></i>
<span id="instagram-picture-time-taken">{{content.timeTaken}}</span>
</div>
</div>
<div class="col-md-6 col-sm-6 content_popup_link_container">
<div class="content_popup_link">
<i class="fa fa-link"></i>
View source
</div>
</div>
</div>
<div class="row" id="content-popup-picture-info-row">
<div class="col-md-12">
<p>{{content.description}}</p>
</div>
<div class="col-md-12" id="content-popup-statistics">
<span><i class="fa fa-thumbs-o-up"></i>{{content.likesCount}}</span>
<span><i class="fa fa-comment-o"></i>{{content.commentsCount}}</span>
</div>
</div>
<form role="form">
<div class="form-body">
<div class="form-group">
<div class="input-icon">
<i class="fa fa-pencil-square-o"></i>
<input id="name" type="text" class="form-control"
placeholder="Add caption">
</div>
</div>
</div>
</form>
<div>
<button class="btn select-content-btn"
ng-click="onSelectedContent(content)"
ng-style="content.selected && {'background-color':'#2ecc71'} || !content.selected && {'background-color':'#95a5a6'}">
<i class="fa fa-check" ng-if="content.selected"></i>
<span ng-if="!content.selected">Select</span>
<span ng-if="content.selected">Selected</span>
</button>
</div>
</div>
</div>
<!--Fancybox footer data end-->
The problem that the scope doesn't being recognized inside the fancybox window and i can't invoke the onSelectedContent().
How can i add the scope to the fancybox window so i could activate all the scope's functions and props?