angularjs ng-show angularjs-ng-show angularjs-ng-if

How to show a <span> element for each rows clicked in angularjs

I just want to make the marked and unmarked icon of each below appear based on the response from the server. I've read series of relevant questions but all seems to be ng-class related, I tried to apply them too but they seem not to be working, I'm not using ng-class, the only thing I want is to make the icons of each rows clicked to show based on the response from the server (TRUE or FALSE). I've reached a solution but it's toggling between all the . The question now is; how do I make the icons appear for every rows clicked?

//my html below

<tr ng-repeat="x in studentList">
    <td>{{x.firstname}}</td>
    <td>{{x.lastname}}</td>
    <td>{{x.firstname}}</td>
    <td>
        <button ng-click="markAttendance($index, x.id)">+</button>
        <button ng-click="unmarkAttendance($index, x.id)">-</button>
        <span ng-show="feedback === 'MARKED'">"marked icon"</span>
        <span ng-show="feedback === 'UNMARKED'">"unmarked icon"</span>
    </td>
</tr>

//my angularjs code below

$scope.markAttendance = function(index, id){
    $http({
        method: 'POST',
        url: 'markattendance.php',
        data: { studentId : id }
    }).then(function (response) {
        if(response.data === 'TRUE'){
           $scope.feedback = 'MARKED';
        } else {
            $scope.feedback = 'FALSE';
        }

Solution

You need to use a flag for each student in studentList separately. You can track them by id.

Here is a working example.

angular.module('app', [])
  .controller('Ctrl', ['$scope', ($scope) => {
    $scope.studentList = [{
      id: 1,
      firstname: 'John',
      lastname: 'Doe',
      feedback: 'UNMARKED'
    }, {
      id: 2,
      firstname: 'Jane',
      lastname: 'Doe',
      feedback: 'UNMARKED'
    }];

    $scope.markAttendance = (id) => {
      $scope.studentList.find(x => x.id === id).feedback = 'MARKED';
    };

    $scope.unmarkAttendance = (id) => {
      $scope.studentList.find(x => x.id === id).feedback = 'UNMARKED';
    };
  }]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<body ng-app="app" ng-controller="Ctrl">

  <table>
    <tr ng-repeat="x in studentList">
      <td>{{x.firstname}}</td>
      <td>{{x.lastname}}</td>
      <td>
        <button ng-click="markAttendance(x.id)">+</button>
        <button ng-click="unmarkAttendance(x.id)">-</button>
        <span ng-show="x.feedback === 'MARKED'">"marked icon"</span>
        <span ng-show="x.feedback === 'UNMARKED'">"unmarked icon"</span>
      </td>
    </tr>
  </table>
</body>