Meme rotating banner

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.angularjs.org/1.5.0-rc.1/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.5.0-rc.1/angular-animate.min.js"></script>
    <script src="script.js"></script>
  </head>

<body ng-controller="MainController as mc">
  <div class="banner-container">
    <img ng-src="{{mc.image}}" class="banner" ng-animate-swap="mc.image" />
  </div>
</body>
</html>

(function() {
'use strict';

/**
 * Main Controller
 */
angular
  .module('app', ['ngAnimate'])
  .controller('MainController', Controller);

Controller.$inject = [
  '$scope',
  '$interval'
];

function Controller($scope, $interval){
  var vm = this,
    index = 0,
    images = [
      'https://i.imgflip.com/vpy9b.jpg',
      'https://i.imgflip.com/vt0fk.jpg',
      'https://i.imgflip.com/vjsem.jpg'
     ],
    stopPromise;
  
  showNext(); //avoid empty frame
  stopPromise = $interval(showNext, 5000);
  
  // Make sure that the interval is destroyed too
  $scope.$on('$destroy', cancelInterval);

  function showNext(){
    vm.image = images[index++ % images.length];
  }
  
  function cancelInterval(){
    if (angular.isDefined(stopPromise)) {
      $interval.cancel(stopPromise);
      stopPromise = undefined;
    }
  }
}

})();

html {
  padding:0;
  margin:0;
}

body {
  padding:20% 0;
}

.banner-container {
  height: 200px;
  width: 265px;
  overflow: hidden;
  margin: 0 auto;
  border: 15px solid #ccc;
  border-radius: 5px;
  position:relative;
}

.banner{
  position: absolute;
  height: 200px;
  transition: 0.5s ease-in-out left;
}

.banner.ng-enter {
  left: -100%;
}
.banner.ng-enter-active {
  left: 0;
}
.banner.ng-leave {
  left: 0;
}
.banner.ng-leave-active {
  left: 100%;
}