AngularJS example

Testing

HTML

<div ng-app="myApp" ng-controller="testCtrl">

  <div ng-repeat="section in sectionList | filter: {id: myVar} " class="animate-switch-container">
    <div class="col-md-12 grid-margin stretch-card">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">{{section.section_name}} {{section.id}}</h4>
          <button type="button" class="btn btn-primary" ng-click="next(section.id)">Start</button>
        </div>
      </div>
    </div>
  </div>

</div>

JavaScript

angular.module('myApp', []).
controller('testCtrl', ['$scope', function($scope) {


  $scope.myVar = 1;
  $scope.next = function(myVar) {
    
    $scope.myVar = parseInt(myVar) + 1;
    console.log($scope.myVar);
  };

  $scope.sectionList = [{
      id: "1",
      section_name: "About me (in detail)"
    },
    {
      id: "2",
      section_name: "About me (single word)"
    },
    {
      id: "3",
      section_name: "My freaky side (in detail)"
    },
    {
      id: "4",
      section_name: "My freaky side (single word)"
    },
    {
      id: "5",
      section_name: "Embarrassing (in detail)"
    },
    {
      id: "6",
      section_name: "Embarrassing (single word)"
    }
  ]


}]);