title: AngularJS - accessing ng-click in custom directive
body: <p>I'm trying to get my head around directives, i can easily use the template function to throw out my HTML, however, if i have an ng-click within my template, how can i access it within the link function?</p>
  
  <p>My directive:</p>
  
  <pre><code>app.directive('directiveScroll', function () {
  return {
        restrict: 'AE',
        replace: 'true',
        template:   '&lt;div class="scroll-btns"&gt;' +
              '&lt;div class="arrow-left" ng-click="scrollLeft(sectionID)"&gt;&lt;/div&gt;' +
              '&lt;div class="arrow-right" ng-click="scrollRight(sectionID)"&gt;&lt;/div&gt;' +
          '&lt;/div&gt;',
        link: function(scope, elem, attrs) {
          $scope.scrollRight  = function () {
            console.log("scrollRight  clicked");
          };
          $scope.scrollLeft  = function () {
            console.log("scrollLeft  clicked");
          };
        }
    };
  });
  </code></pre>
  
  <p>As you can see, i have added <code>$scope.scrollRight</code> to my <code>link</code> function, however on click, nothing appears in the console.</p>
  
  <p>If i place:</p>
  
  <pre><code>$scope.scrollRight  = function () {
       console.log("scrollRight  clicked");
  };
  
  $scope.scrollLeft  = function () {
       console.log("scrollLeft  clicked");
  };
  </code></pre>
  
  <p>In my controller (and out of my directive), it works as expected.</p>
  
  <p>Any help appreciated.</p>