angularProject/app/directives/mainSlider.js

app.directive('mainSlider',['$interval','$timeout',function($interval,$timeout){
  return {
    restrict: 'E',
    scope: {},
    replace: true,
    templateUrl: './app/views/main-slider.html',
    controller: function($scope){
      $scope.currentSlide = 0;
      $scope.slides = [
        'content/images/main-page-slider-image1.jpg',
        'content/images/main-page-slider-image2.jpg',
        'content/images/main-page-slider-image3.jpg'
      ]


      var runInterval = function(){
        $scope.sliderInterval = $interval(function(){
          if($scope.currentSlide == $scope.slides.length - 1){
            $scope.currentSlide = 0;
          } else{
            $scope.currentSlide++;
          }
        },7000)
      }
      runInterval();

      $scope.selectImage = function(imageUrl){
        $scope.currentSlide = $scope.slides.indexOf(imageUrl);
        $interval.cancel($scope.sliderInterval);
        runInterval();
      }
    }
  }
}]);