Infinite Paging Jquery Mobile + Angular

I am building a mobile Infinite scrolling for Mobile page using AngularJs but scrolling is not working for me. I am new to AngularJs. I just wanted to use the $(window).scroll(function () as I mentioned below. Not the <div> scroll.

Source reference from MVC 4 Jquery Mobile site page.( paging logic from Internet example). NOTE:

when-scrolled=loadMore() is not firing for <div> with overflow: auto; but anyway I do not need with inner scoll bar for div tag because of the mobile page.
This code is listing only first iteration 0,10,20,30,40 after the page is loaded after that no effect for scroll down.
With or without jquery-mobile-angular-adapter.js reference this results are the same except scroll down event. When do I need jquery-mobile-angular-adapter.js.
Stand alone jquery-mobile-angular-adapter is 1.2 MB isn't very big for Mobile page ?

Could you please help me how to fix this. Or please suggest any other way for Infinite scrolling. This is from view source after first render

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Index</title>
        <meta name="viewport" content="width=device-width" />
        <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <link href="/Content/jquery.mobile-1.2.0.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile.structure-1.2.0.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile.theme-1.2.0.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

        <script src="/Scripts/modernizr-2.6.2.js"></script>

    </head>
    <body>
        <div data-role="page" data-theme="b">
            <div data-role="header">
                    <h1>Index</h1>
<a data-icon="gear" href="/Account/Login">Log in</a>
            </div>
            <div data-role="content">                
<h2></h2>

  <body ng-app>
      <div ng-controller="Main">
          <div data-role="content" style="padding: 15px;overflow:hidden"  
when-scrolled="loadMore()"  data-theme="c" data-content-theme="c">
              <ul data-role="listview">
                <li ng-repeat="i in items">{{i.id}}</li>
              </ul>  
         </div>
    </div>
  </body>

<script type="text/javascript">
    function Main($scope) {
        ////////// I HAVE ADDED THIS CODE TO SHOW.. I want to bind this one instead of div scroll
        $(window).scroll(function () {
            if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                alert("Scrolled down!!!");
            }
        });

        $scope.items = [];
        var counter = 0;
        $scope.loadMore = function () {
            for (var i = 0; i < 5; i++) {
                $scope.items.push({ id: counter });
                counter += 10;
            }
        };
        $scope.loadMore();
    }

    angular.module('scroll', []).directive('whenScrolled', function () {
        return function (scope, elm, attr) {
            var raw = elm[0];

            elm.bind('scroll', function () {
                //var oo = 'dd'; alert('');
                if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                    scope.$apply(attr.whenScrolled);
                }
            });
        };
    });
</script>
            </div>
        </div>

        <script src="/Scripts/jquery-1.8.2.js"></script>        
        <script>
            $(document).on("mobileinit", function () {
                $.mobile.ajaxEnabled = false;
            });
        </script>
        <script src="/Scripts/jquery.mobile-1.2.0.js"></script>
        <script src="/Scripts/angular_1.2.0rc1.js"></script>
        <script src="/Scripts/jquery-mobile-angular-adapter-1.2.0.js"></script>

    </body>
</html>

opitzconsulting / jquery-mobile-angular-adapter

Infinite Paging Jquery Mobile + Angular #227