title: jquery fancybox + angularJS: fancybox button action issue
body: <p>I'm curious how to add another button in the fancybox that does something.</p>
  
  <p><a href="http://plnkr.co/edit/fHTfBpfHGspOO3BTlgYA?p=preview" rel="nofollow">here is the code http://plnkr.co/edit/fHTfBpfHGspOO3BTlgYA?p=preview</a> that shows 3 fancyboxes with dynamical content.
  However I'm having an issue with buttons - don't know how to make any actions with <code>ng-click="doSomething()</code> inside the button as html code for fancybox is generated outside of the controller scope (if I understand it properly) and can't be reached from the original controller.</p>
  
  <p>Here is the code of 4 files:</p>
  
  <p>app.js</p>
  
  <pre><code>var app = angular.module('plunker', []);
  
  app.controller('appController', ['$scope',
    function ControllerZero($scope) {
  
      $scope.items = [{
        'name': 'First Item',
        'description': 'first description'
      }, {
        'name': 'Second item',
        'description': 'second description'
      }, {
        'name': 'Third Item',
        'description': 'third description'
      }];
    }
  ]);
  
  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' });
                          }
                      });
              };
          }
      };
  });
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="plunker"&gt;
  
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;AngularJS Fancybox&lt;/title&gt;
  
      &lt;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" /&gt;
  
      &lt;script data-require="jquery@1.8.2" data-semver="1.8.2" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.js"&gt;&lt;/script&gt;
      &lt;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"&gt;&lt;/script&gt;
      &lt;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"&gt;&lt;/script&gt;
  
  
      &lt;link rel="stylesheet" href="style.css" /&gt;
  
      &lt;script src="app.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-controller="appController"&gt;
  
      &lt;ul&gt;
        &lt;li ng-repeat="item in items"&gt;
  
          &lt;div class="name"&gt;{{ item.name }}&lt;/div&gt; 
  
            &lt;div fancybox ng-click="openFancybox('template.html')" &gt;Click here&lt;/div&gt;
  
          &lt;/div&gt;
  
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>style.css</p>
  
  <pre><code>/* Put your css in here */
  
  li {list-style-type: none; border: 1px solid #efefef; width:200px; margin-bottom:10px; padding:10px;}
  li div {display: inline-block; width:90px; color: grey;}
  li div.name {color: black; font-weight: bold;}
  </code></pre>
  
  <p>template.html</p>
  
  <pre><code>&lt;h2&gt;{{item.description}}&lt;/h2&gt;
  &lt;button ng-click="doSomething()"&gt;close this fancybox and write something into console&lt;/button&gt;
  &lt;button&gt;open the fancybox with the Second Item&lt;/button&gt;
  </code></pre>