AngularJS Fancybox

var app = angular.module('plunker', []);

app.directive('fancybox', function($compile) {
  return {
    restrict: 'A',
    replace: false,
    link: function($scope, element, attrs) {

      $scope.open_fancybox = function() {
        
        var el = angular.element(element.html()),

        compiled = $compile(el);
        
        $.fancybox.open(el);

        compiled($scope);
     
      };
    }
  };
});

app.controller('MainCtrl', ['$scope',
  function ControllerZero($scope) {

    $scope.phones = [{
      'name': 'Nexus S',
      'snippet': 'Fast just got faster with Nexus S.',
      'age': 1
    }, {
      'name': 'Motorola XOOM™ with Wi-Fi',
      'snippet': 'The Next, Next Generation tablet.',
      'age': 2
    }, {
      'name': 'MOTOROLA XOOM™',
      'snippet': 'The Next, Next Generation tablet.',
      'age': 3
    }];
    
    $scope.alert = function (phone) { window.alert(phone.name); };

  }
]);

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    
    <link data-require="fancybox@2.1.4" data-semver="2.1.4" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" />
    <link data-require="fancybox@2.1.4" data-semver="2.1.4" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/helpers/jquery.fancybox-thumbs.css" />
    <link data-require="fancybox@2.1.4" data-semver="2.1.4" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/helpers/jquery.fancybox-buttons.css" />

    <script data-require="jquery@1.8.2" data-semver="1.8.2" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
    <script data-require="fancybox@2.1.4" data-semver="2.1.4" src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>
    <script data-require="fancybox@2.1.4" data-semver="2.1.4" src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.js"></script>
    <script data-require="fancybox@2.1.4" data-semver="2.1.4" src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/helpers/jquery.fancybox-thumbs.js"></script>
    <script data-require="fancybox@2.1.4" data-semver="2.1.4" src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/helpers/jquery.fancybox-media.js"></script>
    <script data-require="fancybox@2.1.4" data-semver="2.1.4" src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/helpers/jquery.fancybox-buttons.js"></script>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
   
    <ul>
      <li ng-repeat="phone in phones">
        <p>{{ phone.name }} - {{ phone.snippet }}</p>
        <a href ng-click="open_fancybox()">See more</a>
        <div class="wrapper" fancybox>
        <div class="future_fancybox_content">
          <p>This will be the content injected in fancybox.</p>
          <a href="#" ng-click="alert(phone)">Now links are connected to the scope.</a>
        </div>
        </div>
        
      </li>
    </ul>
  </body>

</html>

/* Put your css in here */

.wrapper { display: none; }