How can I get AngularJS binds working with a fancy

Question

I'm learning AngularJS and I'm having some difficulties with dialogs.

Since i'm converting my app from a classical Jquery-based to an angular one, i want to use Fancybox to open dialogs with custom dynamic HTML inside, with the fancybox open method.

$.fancybox.open(html);

I wrote a service to use fancybox: now i open my dialogs but the content inside the dialog is not "compiled" against angular, so any angular directive set on that HTML doesn't work.

See the example

http://plnkr.co/edit/UwryF1ocleyND7zxCGJz?p=preview

I imagine that the problem is in the service, but i don't know how to fix it. Could you show me how i can get an html sensible to angular directive inside the HTML shown in the dialog?

UPDATE:

i've tried to use $compile, and set a directive instead of a service (calling the method inside the directive directly from ng-click)

http://plnkr.co/edit/Y18bRSMdV62VObMGJ2Ie?p=preview

what's wrong now? why my $compile doesn't work as expected?

Answer 1

The problem is that angular looks for function expressions only on the scope and NOT on window as plain-javascript does. Hence, when you add an alert function on the $scope, it will be wired correctly: http://plnkr.co/edit/y02UMQ2kU4fh8Imsa82u?p=preview

$scope.alert = function (phone) { window.alert(phone.name); };