json - Using Angularjs ,how do I trigger Ajax calls located in Controller when we scroll to certain elements such as <div>? -

i using ajax angularjs json outside source. json used populate div in ng-repeat. have 4 such ajax calls 4 different ng-repeat statements.each of these ajax calls located on different controller on same page.

the structure-
controller1 - repeat - endcontroller1
controller2 - repeat - endcontroller2
controller3 - repeat - endcontroller3
controller4 - repeat - endcontroller4

no problem till now.

now want trigger ajax calls according amount scrolled. if user reached controller2 , trhe ajax call controller 2 should triggered. , if user scrrolls controller 3 ajax should triggered.

i have tried creating custom directive likes of - angularjs call function when div scrolled within (x) pixels bottom of screen

any ideas how go it?

function controller1 ($scope){ $scope.trigger= function(){ //ajax call goes here } }  function controller2 ($scope){ $scope.trigger2 = function(){ //ajax call here } } 

in view -

<div ng-controller="controller1">    <div scroll-trigger="trigger()" threshold="100">     <div ng-repeat="item in array">      //population goes here     </div>    </div> </div>  <div ng-controller="controller2">  <div scroll-trigger="trigger2()" threshold="100">    <div ng-repeat="item in array">     //population goes here    </div>  </div> </div> 

in directive-

app.directive('scrolltrigger', function ($window) {  return {     restrict='aec',     link: function (scope, element, attrs) {         var offset = parseint(attrs.threshold) || 0;         var e = jquery(element[0]);         var doc = jquery(document);         angular.element(document).bind('scroll', function () {             if (doc.scrolltop() + $window.innerheight + offset ==                  e.offset().top) {                 scope.$apply(attrs.scrolltrigger);             }         });        }     }; });