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>

    <title>Test Page</title>
    <script src=""> 
    <script type="text/javascript" src="Scripts/common.js"></script>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="CSS/rotateTransition.css">

   <h2>Test Page</h2>

    <div ng-app="mainApp" ng-controller="commonController" ng- 
        Current Image Location: {{imageObject}} <br>
        TimeLeft :{{ countDownLeft }}
        <div ng-style="" ng-class="customStyle.class">
                <img ng-src={{imageObject}}>

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

//Call the function

 //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   
       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