title: AngularJS - ngClick, custom directive, and isolated scope issue
body: <p>Consider the following directive: <a href="http://plnkr.co/edit/9kj2EhT9tyNtGjdJeBHR?p=preview" rel="nofollow">(Live Demo)</a></p>
  
  <pre><code>app.directive('spinner', function() {
    return {
      restrict: 'A',
      scope: {
        spinner: '=',
        doIt: "&amp;doIt"
      },
      link: function(scope, element, attrs) {
        var spinnerButton = angular.element("&lt;button class='btn disabled'&gt;&lt;i class='icon-refresh icon-spin'&gt;&lt;/i&gt; Doing...&lt;/button&gt;");
        element.after(spinnerButton);
  
        scope.$watch('spinner', function(showSpinner) {
          spinnerButton.toggle(showSpinner);
          element.toggle(!showSpinner);
        });
      }
    };
  }); 
  </code></pre>
  
  <p>which is used like this:</p>
  
  <pre><code>&lt;button ng-click="doIt()" spinner="spinIt"&gt;Spin It&lt;/button&gt;
  </code></pre>
  
  <p>When <code>spinner</code>'s value (i.e. the value of <code>$scope.spinIt</code> in this example) is <code>true</code>, the element should be hidden and <code>spinnerButton</code> should appear instead. When <code>spinner</code>'s value is <code>false</code>, the element should be visible and <code>spinnerButton</code> should be hidden.</p>
  
  <p>The problem here is that <code>doIt()</code> is not in the isolated scope, thus not called on click.</p>
  
  <p>What would be the "Angular way" to implement this directive?</p>