title: How to call controller function from directive in angular js ?
body: <p>I am opening a dialog-box on click of button.I want to add endless scroll in that.</p>
  
  <h2>Problem:</h2>
  
  <p>When user scrolls at the end of dialog-box i want to call addMoreData() written in controller.</p>
  
  <p>HTML of Dialog-box:</p>
  
  <pre><code> &lt;modal-dialog show='modalShown' width='60%' height='325px' &gt;
     &lt;div id='diaogContainer'&gt;
       &lt;p&gt;Modal Content Goes here&lt;p&gt;
     &lt;/div&gt;
  &lt;/modal-dialog&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>sampleApp.controller('view3Controller', function($scope) {
       $scope.modalShown = false;
       $scope.toggleModal = function() {
           $scope.modalShown = !$scope.modalShown;
       } 
       **$scope.showMore = function(){
         console.log('showMore');
       }**
     });
  </code></pre>
  
  <p>Directive of Dialog-box:</p>
  
  <pre><code> sampleApp.directive('modalDialog', function() {
     return {
     restrict: 'E',
     scope: {
         show: '='
     },
     replace: true, // Replace with the template below
      transclude: true, 
      link: function(scope, element, attrs) {
      scope.dialogStyle = {};
      if (attrs.width)
          scope.dialogStyle.width = attrs.width;
      if (attrs.height)
          scope.dialogStyle.height = attrs.height;
          scope.hideModal = function() {
          scope.show = false;
      };
   },
   template: "&lt;div class='ng-modal'  ng-show='show'&gt;&lt;div class='ng-modal-overlay'ng-click='hideModal()'&gt;&lt;/div&gt;&lt;div class='ng-modal-dialog' hello **scrolly='showMore()'** ng-style='dialogStyle'&gt;&lt;div class='ng-modal-close' ng-click='hideModal()'&gt;X&lt;/div&gt;&lt;div class='ng-modal-dialog-content' ng-transclude&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;"
    };
  });
  </code></pre>
  
  <p>Directive to load more data:</p>
  
  <pre><code> sampleApp.directive('hello', function () {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
          var raw = element[0];
          element.bind('scroll', function () {
              console.log(raw.scrollTop +'-------'+raw.offsetHeight+'----'+raw.scrollHeight);
              if (raw.scrollTop + raw.offsetHeight &gt;= raw.scrollHeight) {
              // here is problem
              // I am not able to call function through this attr
              //
             **scope.$apply(attrs.scrolly);**
              }
          });
      }
    };
  });
  </code></pre>