AngularJs-在ng上单击时，所有项目都会受到影响

Question

当我单击该元素时，我试图更改范围，但是当我这样做时，所有元素都被更改了

我要完成的工作是，当我单击div之一时，我希望div的颜色变为红色。这部分工作正常。然后，我也想在单击div之一时更改范围。这里发生的是所有范围都在变化。

<div  class="col-md-3 col-sm-6 mb-3" ng-repeat="student in stuRegister.students"  ng-click="stuRegister.absneceChange($index, absence)">

    <div id="myDIV{{$index}}" class="card text-white bg-success o-hidden h-100" data-index="{{$index}}">
           <div class="card-body">
                  <div class="mr-5" >
                         <p>{{$index + 1}}. <strong>{{student.name}}</strong></p></div>
                    <div class="mr-5" data-ng-model-options="stuRegister.aData.role" ><strong ng-bind="absence">Status: {{absence[0]}}</strong></div>                                
                        </div>
                   <a class="card-footer text-white clearfix small z-1" href="#">
                                    <span class="float-left">Indmeld fravær</span>
                                    <span class="float-right">
                                        <i class="fa fa-angle-right"></i>
                                    </span>
                                </a>
                    </div>


                </div>

Js：

    $scope.absence = "Tilstede";

    this.absneceChange = function(index, absence){
        var element = document.getElementsByClassName("card");

        $scope.absence = $scope.absence === "Tilstede" ? "Fravær" : "Tilstede";
        element[index].classList.toggle("bg-danger");
        element[index].classList.toggle("bg-warning");
    }