angularProject/app/views/main-slider.html

<div class="main-slider">
  <div class="main-slider-overlay"></div>
  <div class="main-slider-back-overlay">
    <img ng-src="{{slides[slides.length - 1]}}">
  </div>
  <div class="main-slider-back-overlay2">
    <img ng-src="{{slides[0]}}">
  </div>
  <div class="main-slider-content">
    <div class="main-slider-text">
      <p>DELICIOUS HEALTHY FOOD DELIVERED RIGHT TO YOUR DOOR</p>
    </div>
    <div class="main-slider-buttons">
      <a href="#!/select-menu">SELECT MENU</a>
      <a href="#!/ready-menu">READY MENUS</a>
    </div>
    <div class="main-slider-bars-wrapper">
      <div class="main-slider-bar" ng-repeat="slide in slides" ng-class="{'main-slider-bar-active': slide == slides[currentSlide]}" ng-click="selectImage(slide)"></div>
    </div>
  </div>
  <img ng-animate-swap="slides[currentSlide]" ng-src="{{slides[currentSlide]}}">
</div>