title: AngularJS directive scope function not being called
body: <p>I have created the following directive:</p>
  
  <pre><code>app.directive("autoLoad", function ($window) {
      return { 
          scope: {
              do: '&amp;'
          },
          link : function(scope, element, attrs) {
              var scroller = element[0];
              angular.element($window).bind("scroll", function() {
                  if(($(window).scrollTop() + $(window).height()) &gt; ($(document).height() - 100)) {
                      console.log("GOT HERE!");
                      scope.do(); // LOAD POSTS
                  }
              });
          }
      };
  });
  </code></pre>
  
  <p>This directive should call the do function when the user scrolls to the bottom of the page. This is the div that uses the directive:</p>
  
  <pre><code>&lt;body ng-app="storeApp" layout="row" ng-controller="MainCtrl" ng-cloak"&gt;
  ...
  &lt;div flex layout="column" tabIndex="-1" role="main"
      class="md-whiteframe-z2" auto-Load do="doSomething()"&gt;
  </code></pre>
  
  <p>The controller looks like this:</p>
  
  <pre><code>app.controller("HomeCtrl", function($scope, controllerManager) {
      ...
  
      $scope.doSomething = function() {
          console.log("PLEASE WORK!");
      };
  });
  </code></pre>
  
  <p>When I reach the bottom of the page, GOT HERE is being printed, but the second statement is never shown. Why is the function in the controller not being called?</p>
  
  <p>EDIT: I am using tabs, each of which has a different controller. So the main controller that is applied to the body object, actually does not have the doSomething function inside it:</p>
  
  <pre><code>app.config(function($stateProvider, $urlRouterProvider) {
      $stateProvider.state('home', {
          url : "/home",
          templateUrl : "main.html",
          controller : 'HomeCtrl'
      }).state('top', {
          url : "/top",
          templateUrl : "main.html",
          controller : 'TopCtrl'
      }).state('trending', {
          url : "/trending",
          templateUrl : "main.html",
          controller : 'TrendingCtrl'
      })
      $urlRouterProvider.otherwise('/home');
  });
  
  app.controller("MainCtrl", function($scope, $location, $log) {
      $scope.selectedIndex = 0;
      $scope.$watch('selectedIndex', function(current, old) {
          switch (current) {
          case 0:
              $location.url("/home");
              break;
          case 1:
              $location.url("/top");
              break;
         case 2:
              $location.url("/trending");
              break;
          }
      });
  });
  </code></pre>
  
  <p>The do something function is actually part of each of the sub controllers: HomeCtrl, TopCtrl etc. </p>
  
  <p>The problem seeems to be that the scope is defined by the MainCtrl rather than whatever tab it is currently on. How can this be changed?</p>