title: AngularJS - understanding templates in directives using Angular UI Bootstrap
body: <p>I'm trying to create a quiz directive and I'm using Angular UI Bootstrap's Carousel directive as a reference.</p>
  
  <p>The Angular UI Boostrap carousel uses an outer 'carousel' directive, plus an inner 'slide' directive.  I've looked through the code and the reference implementation, but I'm having trouble understanding something.</p>
  
  <p>The outer markup (i.e. in-page raw, pre-rendered, pre-angularized html) implements an ng-repeat on an array of objects.</p>
  
  <pre><code>&lt;carousel interval="myInterval"&gt;
      &lt;slide ng-repeat="slide in slides" active="slide.active"&gt;
           &lt;div class="carousel-caption"&gt;
               &lt;h4&gt;Slide {{$index}}&lt;/h4&gt;
               &lt;p&gt;{{slide.text}}&lt;/p&gt;
           &lt;/div&gt;
      &lt;/slide&gt;
  &lt;/carousel&gt;
  </code></pre>
  
  <p>I understand how the repeater works in that "slides" is a reference to a $scope.slides array of objects.  What I don't understand is the reference to "slides()" as a function in the template.  How does the array become a function?</p>
  
  <p>The directive is implemented as:</p>
  
  <pre><code>.directive('carousel', [function() {
    return {
      restrict: 'EA',
      transclude: true,
      replace: true,
      controller: 'CarouselController',
      require: 'carousel',
      templateUrl: 'template/carousel/carousel.html',
      scope: {
        interval: '=',
        noTransition: '=',
        noPause: '='
      }
    };
  }])
  </code></pre>
  
  <p>And the template at carousel.html is below.  Notice the reference to "slides()" in the li repeater.</p>
  
  <pre><code>angular.module("template/carousel/carousel.html", []).run(["$templateCache", function($templateCache) {
    $templateCache.put("template/carousel/carousel.html",
      "&lt;div ng-mouseenter=\"pause()\" ng-mouseleave=\"play()\" class=\"carousel\"&gt;\n" +
      "    &lt;ol class=\"carousel-indicators\" ng-show=\"slides().length &gt; 1\"&gt;\n" +
      "        &lt;li ng-repeat=\"slide in slides()\" ng-class=\"{active: isActive(slide)}\" ng-click=\"select(slide)\"&gt;&lt;/li&gt;\n" +
      "    &lt;/ol&gt;\n" +
      "    &lt;div class=\"carousel-inner\" ng-transclude&gt;&lt;/div&gt;\n" +
      "    &lt;a class=\"left carousel-control\" ng-click=\"prev()\" ng-show=\"slides().length &gt; 1\"&gt;&lt;span class=\"icon-prev\"&gt;&lt;/span&gt;&lt;/a&gt;\n" +
      "    &lt;a class=\"right carousel-control\" ng-click=\"next()\" ng-show=\"slides().length &gt; 1\"&gt;&lt;span class=\"icon-next\"&gt;&lt;/span&gt;&lt;/a&gt;\n" +
      "&lt;/div&gt;\n" +
      "");
  }]);
  </code></pre>
  
  <h2>Update</h2>
  
  <p>I just looked at the code in the CarouselController and saw these lines. So, that's where that came from.  Thanks, pkozlowski.opensource for the confirmation.  :^)</p>
  
  <pre><code>var self = this,
      slides = self.slides = [],
      ....;
  
  $scope.slides = function() {
      return slides;
  };
  </code></pre>