Display (Show) records on Previous and Next Button Click using AngularJS in ASP.Net MVC

Hi mahesh213,

Refer below code.

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetData()
    {
        List<Question> questions = new List<Question>();
        questions.Add(new Question { QId = 1, QName = "question#1" });
        questions.Add(new Question { QId = 2, QName = "question#2" });
        questions.Add(new Question { QId = 3, QName = "question#3" });

        List<QuestionOptions> questionOptions = new List<QuestionOptions>();
        questionOptions.Add(new QuestionOptions { QId = 1, QopId = 1, Options = "answer#1" });
        questionOptions.Add(new QuestionOptions { QId = 2, QopId = 1, Options = "answer#2" });
        questionOptions.Add(new QuestionOptions { QId = 3, QopId = 1, Options = "answer#3" });
        questionOptions.Add(new QuestionOptions { QId = 4, QopId = 2, Options = "answer#4" });
        questionOptions.Add(new QuestionOptions { QId = 5, QopId = 2, Options = "answer#5" });
        questionOptions.Add(new QuestionOptions { QId = 6, QopId = 2, Options = "answer#6" });
        questionOptions.Add(new QuestionOptions { QId = 7, QopId = 3, Options = "answer#7" });
        questionOptions.Add(new QuestionOptions { QId = 8, QopId = 3, Options = "answer#8" });
        questionOptions.Add(new QuestionOptions { QId = 9, QopId = 3, Options = "answer#9" });
        List<QuizModel> CO = new List<QuizModel>();

        var cust = questions.OrderBy(a => a.QId).ToList();
        foreach (var i in cust)
        {
            var orders = questionOptions.Where(a => a.QopId.Equals(i.QId)).OrderBy(a => a.QopId).ToList();
            CO.Add(new QuizModel
            {
                Questions = i,
                Questionoptions = orders
            });
        }

        return new JsonResult { Data = CO, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

    public class Question
    {
        public int QId { get; set; }
        public string QName { get; set; }
    }

    public class QuestionOptions
    {
        public int QopId { get; set; }
        public int QId { get; set; }
        public string Options { get; set; }
    }

    public class QuizModel
    {
        public Question Questions { get; set; }
        public List<QuestionOptions> Questionoptions { get; set; }
    }
}

View

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js"></script>
<script type="text/javascript">
    var app = angular.module('surveyApp', ['angularUtils.directives.dirPagination']);
    app.controller('surveyCtrl', function ($scope, $http) {
        $scope.Data = [];
        $scope.questionSet = [];
        $scope.Index = 0;
        $http({
            method: 'Get',
            url: '/Home/GetData'
        }).then(function (result) {
            $scope.Data = result.data;
            for (var i = 0; i < $scope.Data.length; i++) {
                if (i < $scope.Index + 1) {
                    $scope.questionSet.push($scope.Data[i]);
                }
            }
        });
        $scope.NextPrev = function (nextprev) {
            if (nextprev == 'next') {
                $scope.Index = $scope.Index + 1;
            } else if (nextprev == 'prev') {
                $scope.Index = $scope.Index - 1;
            }
            $scope.questionSet = [];
            for (var i = 0; i < $scope.Data.length; i++) {
                if (i >= $scope.Index) {
                    if (i < $scope.Index + 1) {
                        $scope.questionSet.push($scope.Data[i]);
                    }
                }
            }
        }
    });
</script>
<div class="container" ng-app="surveyApp" ng-controller="surveyCtrl">
    <div ng-repeat="customer in questionSet">
        {{$index+1}}.{{customer.Questions.QName}}
        <form action="">
            <div ng-repeat="options in customer.Questionoptions" style="display: inline;">
                <input type="radio" name="gender" ng-model="question.random" ng-value="options.Options"
                        ng-click="Select()">
                {{options.Options}}
            </div>
        </form>
    </div>
    <br />
    <button type="button" ng-click="NextPrev('prev')" ng-disabled="Index == 0">Previous</button>
    <button type="button" ng-click="NextPrev('next')" ng-disabled="Index == questionSet.length+1">Next</button>
</div>

Screenshot