AngularJS Fancybox Popup - angularjs

Question

I have started an angularjs project and I would like to implement fancybox.
For this, I have included the jQuery and fancybox plugins to the solution. I am attempting to open the template in the code shown below in a fancybox window.
View
ADD
Controller
app.controller('MainController',
function MainController($scope) {
$scope.user = "Hey Welcome";
$scope.open = function(template_path){
$.fancybox({"href":template_path})
}
}
)
And popup/add.html
<div class="pop-contnr">
<h2>ADD</h2>
<table>
<thead>
<tr>
<th align=center>{{user}}</th>
</tr>
</thead>
</table>
</div>
Fancybox successfully opens a window containing the template, but the {{user}} expression has not been evaluated. Can anyone please help?

Answer 1

I have created a directive for fancybox
app.directive('fancybox',function($compile, $timeout){
return {
link: function($scope, element, attrs) {
element.fancybox({
hideOnOverlayClick:false,
hideOnContentClick:false,
enableEscapeButton:false,
showNavArrows:false,
onComplete: function(){
$timeout(function(){
$compile($("#fancybox-content"))($scope);
$scope.$apply();
$.fancybox.resize();
})
}
});
}
}
});

Answer 2

Here is a simplified version of a fancybox directive my team and I wrote to open fancyboxes based on a template with a single click.
It is invoked in the markup like this:
<div fancybox ng-click="openFancybox('templateUrl')"> </div>
The code for the directive is:
app.directive('fancybox', function ($compile, $http) {
return {
restrict: 'A',
controller: function($scope) {
$scope.openFancybox = function (url) {
$http.get(url).then(function(response) {
if (response.status == 200) {
var template = angular.element(response.data);
var compiledTemplate = $compile(template);
compiledTemplate($scope);
$.fancybox.open({ content: template, type: 'html' });
}
});
};
}
};
});
It can be seen working in this plunker

Answer 3

I extended the answer above to use Angular's template cache.
It is invoked in the markup like this:
<div fancybox fancybox-template="template.html">Open Fancybox</div>
The code for the directive is:
app.directive('fancybox', function ($templateRequest, $compile) {
return {
scope: true,
restrict: 'A',
controller: function($scope) {
$scope.openFancybox = function (url) {
$templateRequest(url).then(function(html){
var template = $compile(html)($scope);
$.fancybox.open({ content: template, type: 'html' });
});
};
},
link: function link(scope, elem, attrs) {
elem.bind('click', function() {
var url = attrs.fancyboxTemplate;
scope.openFancybox(url);
});
},
}
});
Here's the plunker.