From dac087eb89572cddf08c3527c0af9ed8d9f3bc59 Mon Sep 17 00:00:00 2001
From: Wesley Cho <wesley.cho@gmail.com>
Date: Thu, 13 Aug 2015 11:02:08 -0700
Subject: [PATCH] feat(carousel): add model binding support to slide

- Add support for binding slide model to slide

Closes #4202
Resolves #4201
---
 src/carousel/carousel.js           |  1 +
 src/carousel/docs/README.md        |  6 ++++--
 src/carousel/test/carousel.spec.js | 23 +++++++++++++++++++++++
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/carousel/carousel.js b/src/carousel/carousel.js
index 733c1caa61..4e48d95850 100644
--- a/src/carousel/carousel.js
+++ b/src/carousel/carousel.js
@@ -316,6 +316,7 @@ function CarouselDemoCtrl($scope) {
     },
     scope: {
       active: '=?',
+      actual: '=?',
       index: '=?'
     },
     link: function (scope, element, attrs, carouselCtrl) {
diff --git a/src/carousel/docs/README.md b/src/carousel/docs/README.md
index bf8bbe2225..69da16a93a 100644
--- a/src/carousel/docs/README.md
+++ b/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.
diff --git a/src/carousel/test/carousel.spec.js b/src/carousel/test/carousel.spec.js
index e1db5a5155..48bf9bcb34 100644
--- a/src/carousel/test/carousel.spec.js
+++ b/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);
+  });
 });