Toggling class in ng:repeat

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="container-fluid row" ng-app='myApp 'ng-controller="controller">
    <div class="btn btn-dark btn-block stacked" ng-repeat="div in stackedDivs" ng-class="div.kls" ng-click="setSelected($index)">Div {{$index+1}}</div>
</div>

CSS

body { font-family: Arial,Helvetica,sans-serif; }
body, td, th { font-size: 14px; margin: 0; }
table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }
a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }

div.stacked {
    text-align: center;
    border: 1px solid black;
    cursor:pointer;
    width:  50px;
    height: 50px;
    margin: auto;
}
div.classA {
     background-color: #063;   
}
div.classB {
    background-color: white;
}

JavaScript

var myApp= angular.module('myApp', []);

myApp.controller('Controller', function($scope){
        $scope.stackedDivs = [ {'kls' : 'classB'}, {'kls' : 'classB'}, {'kls' : 'classB'} ];
        $scope.lastSelectedDiv = -1;
        $scope.setSelected = function(idx) {
            if($scope.lastSelectedDiv != -1) {
                $scope.stackedDivs[$scope.lastSelectedDiv].kls = 'classB';
            }
            $scope.lastSelectedDiv = idx;
            $scope.stackedDivs[idx].kls = 'classA';
        };


});