Adds pagination customization option

README.md

@@ -147,6 +147,82 @@ app.run(['Carousel', (Carousel) => {
 </ui-carousel>
 ```
 
+### Custom pagination
+
+If you want to forgo the use of "dots" and use any sort of custom pagination indicator, you may use a `carousel-pagination` iten in your html.
+
+```javascript
+<ui-carousel 
+  slides="ctrl.slides"
+  slides-to-show="3"
+  slides-to-scroll="1"
+  initial-slide="1"
+  autoplay="true"
+  autoplay-speed="2000"
+  dots="false">
+  <carousel-item>
+    <h3>{{ item + 1 }}</h3>
+  </carousel-item>
+  <carousel-pagination>SLIDE {{ctrl.currentSlide + 1}} of {{ctrl.slides.length + 1}}</carousel-pagination>
+</ui-carousel>
+```
+
+### External Data Binding
+
+If you want to pass additional externally scoped data apart from the slide list, you may use the `data`attribute. Within the context of an individual carousel these values can be accessed uder the controller variable named as `ctrl`.
+
+```javascript
+// inside the controller
+$scope.externally_scoped_data = {
+  ShowExtraContentOnSlide: 4,
+  ExtraContent: "This is scoped elsewhere"
+}
+```
+
+```javascript
+<ui-carousel 
+  slides="ctrl.slides"
+  slides-to-show="3"
+  slides-to-scroll="1"
+  initial-slide="1"
+  autoplay="true"
+  autoplay-speed="2000"
+  dots="true"
+  data="externally_scoped_data">
+
+  <carousel-item>
+    <h3>{{ item + 1 }}</h3>
+    <div ng-show="ctrl.data.ShowExtraContentOnSlide === $index">
+      {{ctrl.data.ExtraContent}}
+    </div>
+  </carousel-item>
+</ui-carousel>
+```
+
+### Addressable handle for programatic interaction
+
+If you need to act upon the slide control outside of the slideshow's internal scope, you can create a handle to the show within your parent controller. An example might be when you wish to "jump to" a given slide based on an action outside of the slideshow itself.
+
+```javascript
+<ui-carousel 
+  slides="ctrl.slides"
+  slides-to-show="3"
+  slides-to-scroll="1"
+  initial-slide="1"
+  autoplay="true"
+  autoplay-speed="2000"
+  dots="true"
+  handle="my_slideshow">
+
+  <carousel-item></carousel-item>
+</ui-carousel>
+```
+then from within your parent scope
+
+```javascript
+$scope.my_slideshow.movePage(3);
+```
+
 Definitions
 ===========
 

dist/ui-carousel.js

@@ -626,6 +626,8 @@ angular.module('ui.carousel.directives').directive('uiCarousel', ['$compile', '$
     bindToController: true,
     scope: {
       name: '=?',
+      data: '=?',
+      handle: '=?',
       slides: '=',
       show: '=?slidesToShow',
       scroll: '=?slidesToScroll',
@@ -656,7 +658,8 @@ angular.module('ui.carousel.directives').directive('uiCarousel', ['$compile', '$
       var injectComponentMap = {
         'carousel-item': '.carousel-item',
         'carousel-prev': '.carousel-prev',
-        'carousel-next': '.carousel-next'
+        'carousel-next': '.carousel-next',
+        'carousel-pagination': '.carousel-pagination'
       };
 
       var templateInstance = template.clone();
@@ -669,6 +672,7 @@ angular.module('ui.carousel.directives').directive('uiCarousel', ['$compile', '$
 
       var compiledElement = $compile(templateInstance)($scope);
       el.addClass('ui-carousel').html('').append(compiledElement);
+      $scope.ctrl.handle = $scope.ctrl;
     },
 
 
@@ -734,6 +738,6 @@ angular.module('ui.carousel.providers').provider('Carousel', function () {
     module = angular.module('ui.carousel', []);
   }
   module.run(['$templateCache', function ($templateCache) {
-    $templateCache.put('ui-carousel/carousel.template.html', '<div class="carousel-wrapper" ng-show="ctrl.isCarouselReady"><div class="track-wrapper"><div class="track" ng-style="ctrl.trackStyle"><div class="slide" ng-repeat="item in ctrl.slidesInTrack track by $index" ng-style="ctrl.getSlideStyle($index)"><div class="carousel-item"></div></div></div></div><div class="carousel-prev" ng-if="!ctrl.disableArrow" ng-show="ctrl.isVisiblePrev &amp;&amp; ctrl.options.arrows" ng-class="{\'carousel-disable\': !ctrl.isClickablePrev}" ng-click="ctrl.prev()"><button class="carousel-btn"><i class="ui-icon-prev"></i></button></div><div class="carousel-next" ng-if="!ctrl.disableArrow" ng-show="ctrl.isVisibleNext &amp;&amp; ctrl.options.arrows" ng-class="{\'carousel-disable\': !ctrl.isClickableNext}" ng-click="ctrl.next()"><button class="carousel-btn"><i class="ui-icon-next"></i></button></div><ul class="carousel-dots" ng-show="ctrl.isVisibleDots &amp;&amp; ctrl.options.dots"><li ng-repeat="dot in ctrl.getDots()" ng-class="{ \'carousel-active\': dot == ctrl.currentSlide/ctrl.options.slidesToScroll }" ng-click="ctrl.movePage(dot)"><button>{{ dot }}</button></li></ul></div>');
+    $templateCache.put('ui-carousel/carousel.template.html', '<div class="carousel-wrapper" ng-show="ctrl.isCarouselReady"><div class="track-wrapper"><div class="track" ng-style="ctrl.trackStyle"><div class="slide" ng-repeat="item in ctrl.slidesInTrack track by $index" ng-style="ctrl.getSlideStyle($index)"><div class="carousel-item"></div></div></div></div><div class="carousel-prev" ng-if="!ctrl.disableArrow" ng-show="ctrl.isVisiblePrev &amp;&amp; ctrl.options.arrows" ng-class="{\'carousel-disable\': !ctrl.isClickablePrev}" ng-click="ctrl.prev()"><button class="carousel-btn"><i class="ui-icon-prev"></i></button></div><div class="carousel-next" ng-if="!ctrl.disableArrow" ng-show="ctrl.isVisibleNext &amp;&amp; ctrl.options.arrows" ng-class="{\'carousel-disable\': !ctrl.isClickableNext}" ng-click="ctrl.next()"><button class="carousel-btn"><i class="ui-icon-next"></i></button></div><ul class="carousel-dots" ng-show="ctrl.isVisibleDots &amp;&amp; ctrl.options.dots"><li ng-repeat="dot in ctrl.getDots()" ng-class="{ \'carousel-active\': dot == ctrl.currentSlide/ctrl.options.slidesToScroll }" ng-click="ctrl.movePage(dot)"><button>{{ dot }}</button></li></ul><div class="carousel-pagination"></div></div>');
   }]);
 })();