How to reload CSS in the div tag

I have a div tag with image tag inside it. Am using an angularjs controller to change the source of the image dynamically (basically it is a photo slideshow). The div tag has a CSS class to rotate the image when it is appearing. My problem is the CSS only works for the first image and it does not work for the other images. I have created a custom CSS through angular thinking it would work, but it didn’t.

Below is my HTML code:

<!DOCTYPE html>
<html>

<head>
    <title>Test Page</title>
    <script src=" 
    https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> 
    </script>
    <script type="text/javascript" src="Scripts/common.js"></script>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="CSS/rotateTransition.css">
</head>

<body>
   <h2>Test Page</h2>

    <div ng-app="mainApp" ng-controller="commonController" ng- 
    init="init('testloc')">
        Current Image Location: {{imageObject}} <br>
        TimeLeft :{{ countDownLeft }}
        <div ng-style="customStyle.style" ng-class="customStyle.class">
                <img ng-src={{imageObject}}>
        </div>
    </div>
 </body>
</html>

Below is my code in angularJS controller which changes the image source

//Call the function
 slideShow();


 //Declare the function, which puts the image in to the slide show
 function slideShow() {
    //Assign only if the image location is aquatic
    if ($scope.images[imageCounter].location ==  $scope.tvLocation) {
       $scope.imageObject = $scope.images[imageCounter].src  //set the image source  
       $scope.$apply(); //refresh the view   
       _startCountdown($scope.images[imageCounter].duration);
       setTimeout(slideShow, $scope.images[imageCounter].duration); // Change image every 6 seconds
    } else {
       setTimeout(slideShow, 1)   //If the location doesnt matchup, timeout in 1 ms
    }

Source: AngularJS