example.js

// index.html
<div ng-controller="SlideShowController">
  <slide-show slides="slides"></slide-show>
</div>

// slide-show.html
<div class="slideshow">
  <ul class="slideshow-slides">
  <li ng-repeat="slide in slides" ng-class="{ active: $index == activeIndex }">
    <figure>
      <img ng-src="{{ slide.imageUrl }}" />
      <figcaption ng-show="slide.caption">{{ slide.caption }}</figcaption>
    </figure>
  </li>
  </ul>
  <ul class="slideshow-dots">
    <li ng-repeat="slide in slides" ng-class="{ active: $index == activeIndex }">
      <a ng-click="jumpToSlide($index)">{{ $index + 1 }}</a>
    </li>
  </ul>
</div>
      
// js
app.controller("SlideShowController", function($scope) {
  $scope.slides = [{
    imageUrl: "image.jpg",
    caption: "This is image"
  }, {
    imageUrl: "image.jpg",
    caption: "This is image"
  }];
});

app.directive("slideShow", function() {
  return {
    restrict: 'E',
    scope: {
      slides: '='
    },
    template: 'slide-show.html',
    link: function($scope, element, attrs) {
      $scope.activeIndex = 0;
      $scope.jumpToSlide = function(index) {
        $scope.activeIndex = index;
      };
    }
  };
});