feat(carousel): add model binding support to slide

- Add support for binding slide model to slide

Closes #4202
Resolves #4201

Author: wesleycho

src/carousel/carousel.js

@@ -316,6 +316,7 @@ function CarouselDemoCtrl($scope) {
     },
     scope: {
       active: '=?',
+      actual: '=?',
       index: '=?'
     },
     link: function (scope, element, attrs, carouselCtrl) {

src/carousel/docs/README.md

@@ -4,6 +4,8 @@ The carousel also offers support for touchscreen devices in the form of swiping.
 
 Use a `<carousel>` element with `<slide>` elements inside it.  It will automatically cycle through the slides at a given rate, and a current-index variable will be kept in sync with the currently visible slide.
 
-Use the `no-wrap` attribute on a `<carousel>` element to control the looping of slides; setting `no-wrap` to an expression which evaluates to a truthy value will prevent looping
+Use the `no-wrap` attribute on a `<carousel>` element to control the looping of slides; setting `no-wrap` to an expression which evaluates to a truthy value will prevent looping.
 
-Use the `template-url` attribute on a `<carousel>` or `<slide>` element to specify the url of a custom template to override the default templates
+Use the `template-url` attribute on a `<carousel>` or `<slide>` element to specify the url of a custom template to override the default templates.
+
+Use the `actual` attribute on a `<slide>` element to bind the slide model (or any object of interest) onto the slide directive's `$scope`, which makes it available for customization in the carousel template.

src/carousel/test/carousel.spec.js

@@ -499,4 +499,27 @@ describe('carousel', function() {
       expect(elm.html()).toBe('foo');
     }));
   });
+
+  it('should expose a custom model in the carousel slide', function() {
+    var scope = $rootScope.$new();
+    scope.slides = [
+      {active:false,content:'one'},
+      {active:false,content:'two'},
+      {active:false,content:'three'}
+    ];
+    var elm = $compile(
+      '<carousel interval="interval" no-transition="true" no-pause="nopause">' +
+        '<slide ng-repeat="slide in slides" active="slide.active" actual="slide">' +
+          '{{slide.content}}' +
+        '</slide>' +
+      '</carousel>'
+    )(scope);
+    $rootScope.$digest();
+
+    var ctrl = elm.controller('carousel');
+
+    expect(angular.equals(ctrl.slides.map(function(slide) {
+      return slide.actual;
+    }), scope.slides)).toBe(true);
+  });
 });