title: Angular - function inside directive scope gets called when it shouldn't
body: <p>Hi I am struggling with the following:</p>
  
  <p><a href="http://jsfiddle.net/uqZrB/9/" rel="nofollow">http://jsfiddle.net/uqZrB/9/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div ng-controller="MyController"&gt;
      &lt;p&gt;Button Clicked {{ClickCount}} Times &lt;/p&gt;
      &lt;my-clicker on-click="ButtonClicked($event)"&gt;
      &lt;/my-clicker&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var MyApp = angular.module('MyApp',[]);
  
  MyApp.directive('myClicker', function() {
  
      return {
  
              restrict: 'E',
              scope: {
                  onClick: "="
              },
              link: function($scope, element, attrs) {                             
  
                  var button = angular.element("&lt;button&gt;Click Me&lt;/button&gt;");
                  button.bind("mousedown", $scope.onClick);                
                  element.append(button);
  
              }
          };
  
  });
  
  MyApp.controller("MyController", function ($scope) {
      $scope.ButtonClicked = function($event) {
          $scope.ClickCount++;
      };
      $scope.ClickCount = 0;
  });
  </code></pre>
  
  <p>(using angular1.2 rc : <a href="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js" rel="nofollow">https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js</a>)</p>
  
  <p>The custom directive "myClicker" should insert a button into the  tag, and bind its mousedown event to a function supplied in the directive scope...</p>
  
  <p>I.e. i can pass the  a function from the controller, to execute when the button is clicked.</p>
  
  <p>As you can see, when you run the fiddle, the bound event gets run 11 times, on load.... i.e. before the button has event been clicked.</p>
  
  <p>Running its 11 times causes the "10 $digest() iterations reached. Aborting!" error.</p>
  
  <p>Then, when I click the button I get "Cannot call method 'call' of undefined", as if the method was not declared in the scope.</p>
  
  <ol>
  <li><p>Why does angular try and run the method on loading?</p></li>
  <li><p>Why is the "onClick" method not available in the scope?</p></li>
  </ol>
  
  <p>I think I am misunderstanding something about the directive's isolated scope.</p>
  
  <p>Thanks in advance!</p>