how to go to same page with different data into laravel using angular js by clicking next button

Question

I have JSON data that has question data is

{
    "id": 51,
    "question_title": "this is title of Write Essay",
    "media_type": null,
    "media_link": null,
    "question": "This is summary of the write essay of the questions. This will show the questions of the write essay.",
    "categoryID": 2,
    "subcategoryID": 7,


},
{
    "id": 54,
    "question_title": "this is title of Write Essay",
    "media_type": null,
    "media_link": null,
    "question": "This is questions. This will show the questions of the write essay with the title of the array and the question of the data",
    "categoryID": 2,
    "subcategoryID": 7,

}

I want to next question on the same page without reloading the page JST by clicking the next button on the page how can I do that.
My html code is

@foreach($question as $qus)
<div id="question" style="display: none;">{{$qus->question}}</div>
@endforeach

<!-------------------------------------Content section starts here------------------------------------>
<div class="container-fluid" ng-app="summarize-written-text">
  <div id="written-text">
    <div class="row">
      <div class="col-sm-10 col-sm-offset-1 col-lg-10 col-lg-offset-1" ng-controller="summarizeController">
        <div class="row">
          <div class="col-lg-12">
            <div class="consume-time text-right">00:00:10</div>
            <p class="note">@{{current.Note}}
            </p>
            <div ng-repeat="d in current.Info">
              <p>@{{d.Value}}</p>
            </div>
            <div class="form-group">
              <textarea class="form-control" rows="5" id="comment" ngclipboard></textarea>
            </div>

          </div>
        </div>
        <div class="row text-center">
          <div class="col-lg-4 col-sm-4 col-xs-4">
            <button class="btn btn-primary" ngclipboard data-clipboard-target="#comment" data-clipboard-action='cut'>Cut</button>
          </div>
          <div class="col-lg-4 col-sm-4 col-xs-4">
            <button class="btn btn-primary" ngclipboard data-clipboard-target="#comment" data-clipboard-action='copy'>Copy</button>
          </div>
          <div class="col-lg-4 col-sm-4 col-xs-4">
            <button class="btn btn-primary" ngclipboard data-clipboard-target="#comment" data-clipboard-action='paste'>Paste</button>
          </div>
        </div>
        <div class="bottom-section">
          <div class="row">
            <div class="col-lg-6 col-sm-4 col-xs-4">
              <button class="btn btn-primary">Re-start</button>
              <button class="btn btn-primary">Answer</button>
            </div>
            <div class="col-lg-6 col-sm-8 col-xs-8">
              <div class="float-right">
                <button class="btn btn-primary"><i class="fa fa-bars"></i></button>
                <button class="btn btn-primary" ng-click="prevoius()">Previous</button>
                <button class="btn btn-primary">
              <select>
                <option value="0">Select:</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
              </select>
              </button>
                <button class="btn btn-primary" ng-click="next()">Next</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-sanitize.js"></script>
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngclipboard/2.0.0/ngclipboard.js"></script>

<script>
  var app = angular.module('summarize-written-text', ['ngclipboard']);
  app.controller('summarizeController', function($scope) {
    var question = $("#question").text();
    $scope.Data = [{
      index: 0,
      Note: "1. Read the passage below and summarize it using one sentence. Type your response in the box at the bottom of the screen. You have 10 minutes to finish this task. Your response will be judge on the quality of your writing and on how well your response presents the key points in the passage.",

      Info:

    }, ]

    $scope.current = $scope.Data[0],
      $scope.next = function() {
        var i = $scope.getIndex($scope.current.index, 1);
        $scope.current = $scope.Data[i];
      },
      $scope.previous = function() {
        var i = $scope.getIndex($scope.current.index, -1);
        $scope.current = $scope.Data[i];
      },
      $scope.getIndex = function(currentIndex, shift) {
        var len = $scope.Data.length;
        return (((currentIndex + shift) + len) % len)
      }
  });
</script>

how can I get this type of functionality in my app?

Answer 1

You can use the $key => $value notation in the @foreach in Blade to get the index of the value in your JSON and then use a ng-show directive to show it as you wish using your scope variable in your controller.

For example:

@foreach($question as $key => $qus)
<div ng-show="current.index == {{$key}}">{{$qus->question}}</div>
@endforeach

Avoid to use the same ID for different elements in your HTML