Javascript AngularJs-在ng上单击所有项目受影响

我试图在单击元素时更改范围，但当我这样做时，所有元素都会更改

我想完成的是当我点击其中一个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>

---

还可以共享受影响的html。另外，您直接在angular中访问DOM，这是不好的，如果您共享适当的代码，我将为您提供一种更好的方法。因此，您不需要javascript来完成您试图完成的任务。Angular的ng类会做得很好我已经插入了html代码absneceChange定义在哪里？可以有多张卡片吗？是的，我用ng repeat来显示多张卡片。我已经更新了这个问题，也许你会理解得更好。

    $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");
    }