Here In this article, I have used Visual Studio 2013

Go to File > New > Project > ASP.NET  Web Application (under web) > Entry Application Name > Click OK > Select Empty template > Checked MVC (under "Add folders and core references for" option) > OK

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.

Step-4: Add Entity Data Model.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-5: Create a javascript file for angular components.

Here I have added a javascript file in the "Scripts" folder for add angular components (module, controller, directive etc).

Here I have added a folder "Scripts" in our solution. If you have not already added, you can follow the below steps for adding the folder.

Right click on your solution > Add > new folder ... > Rename to "Scripts".

Right click on your "Scripts" folder > Add > New Item > select "javascript" file > Enter name (here "myApp.js")> Ok.
Write following code

var app = angular.module('myApp', []);
app.controller('InfinityScrollController', ['$scope', '$http', function ($scope, $http) {
    $scope.CurrentPage = 1;
    $scope.TotalPage = 0;
    $scope.EmployeeList = [];

    function GetEmployeeData(page) {
        $scope.IsLoading = true;
        $http({
            method: 'GET',
            url: '/home/getEmployeeData',
            params: { 'page': page }
        }).then(function (response) {
            angular.forEach(response.data.List, function (value) {
                $scope.EmployeeList.push(value);
            });
            $scope.TotalPage = response.data.totalPage;
            $scope.IsLoading = false;
        }, function () {
            $scope.IsLoading = false;
        })
    }

    GetEmployeeData($scope.CurrentPage);

    $scope.NextPage = function () {
        if ($scope.CurrentPage < $scope.TotalPage) {
            $scope.CurrentPage += 1;
            GetEmployeeData($scope.CurrentPage);
        }
    }
}]);

//directive
app.directive('infinityscroll', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.bind('scroll', function () {
                if ((element[0].scrollTop + element[0].offsetHeight) == element[0].scrollHeight) {
                    //scroll reach to end
                    scope.$apply(attrs.infinityscroll)
                }
            });
        }
    }
});

Step-6: Create an MVC Controller.

Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Templete "empty MVC Controller"> Add.

Here I have created a controller named "HomeController"

Step-7: Add new action into your controller. 

Here I have added "Index" Action into "Home" Controller. Please write this following code

public ActionResult Index()
{
   return View();
}

Step-8: Add view for your Action and design.

Right Click on Action Method (here right click on Index action) > Add View... > Enter View Name > Select View Engine (Razor) > Add.
HTML Code

@{
    ViewBag.Title = "Index";
}
<div class="container">
    <h2>Infinity scroll in AngularJS</h2>
    <div ng-app="myApp" ng-controller="InfinityScrollController">
        <div style="position:relative">
            <span ng-show="IsLoading" class="loading">Loading...</span>
            <div infinityscroll="NextPage()" style="height:400px; overflow:auto;">
                <table class="table table-responsive table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Country</th>
                            <th>City</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="emp in EmployeeList">
                            <td>{{emp.FirstName}} {{emp.LastName}}</td>
                            <td>{{emp.EmailID}}</td>
                            <td>{{emp.Country}}</td>
                            <td>{{emp.City}}</td>
                        </tr>
                    </tbody>
                </table>  
            </div>
        </div>
    </div>
</div>

@* JS *@
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script>
<script src="~/Scripts/myApp.js"></script>
@* CSS *@
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
/*Loading panel css*/
    .loading{
        position:absolute;
        left:48%;
        top:48%;
        display:block;
        padding:5px;
        background-color:yellow;
        color:red;
        border:1px solid;
        margin:0 auto;
    }
</style>

Step-9: Add an another action in our MVC controller for fetch data from the database.

public JsonResult getEmployeeData(int page)
{
    List<Employee> list = new List<Employee>();
    using (MyDatabaseEntities dc = new MyDatabaseEntities())
    {
        int totalPage = 0;
        int totalRecord = 0;
        int pageSize = 20;

        var v = dc.Employees.OrderBy(a => a.FirstName);
        totalRecord = v.Count();
        totalPage = (totalRecord / pageSize) + ((totalRecord%pageSize) > 0 ? 1: 0);

        list = v.Skip((page - 1) * pageSize).Take(pageSize).ToList();

        return new JsonResult { Data = new { List = list, currentPage = page, totalPage = totalPage }, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }
}

Step-10: Run Application.