title: Transcluding ng-click in a directive
body: <p>I am building an AngularJS directive. I want that directive to wrap other contents which have an ng-click inside of it. The resulting button does not do anything when clicked.
  Here is a simplified version of the code which I tried:</p>
  
  <p>(HTML)</p>
  
  <pre><code>&lt;div ng-app="someapp"&gt;
      &lt;div ng-controller="Ctrl1"&gt;
          &lt;h2&gt;Example&lt;/h2&gt;
          &lt;my-dir data-x="1"&gt;
              &lt;button ng-click="refresh()" id="refresh1"&gt;Refresh&lt;/button&gt;
          &lt;/my-dir&gt;
          &lt;my-dir data-x="2"&gt;
              &lt;button ng-click="refresh()" id="refresh2"&gt;Refresh&lt;/button&gt;
          &lt;/my-dir&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>(JavaScript)</p>
  
  <pre><code>var app = angular.module('someapp', []);
  
  app.controller('Ctrl1', function($scope){ });
  
  app.directive('myDir', function(){
      return {
          restrict: 'E',
          scope: {},
          template: '&lt;div&gt;&lt;p&gt;Directive contents:&lt;/p&gt;&lt;div ng-transclude&gt;&lt;/div&gt;&lt;/div&gt;',
          transclude: true,
          link: function(scope, element, attrs){
              $scope.y = attrs.x+1;
              scope.refresh = function(){
                  console.log("Refresh Called, y = ", $scope.y);
              }
          }
      };
  });
  </code></pre>
  
  <p>How can I change it so that the button actually triggers the $scope.refresh() function?</p>
  
  <p>Extra clarification:</p>
  
  <p>I need local object information for the directive (there can be multiple of this directive in the single controller), so I create a new scope.</p>