AngularJS - understanding templates in directives using Angular UI Bootstrap

I'm trying to create a quiz directive and I'm using Angular UI Bootstrap's Carousel directive as a reference.

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.

The outer markup (i.e. in-page raw, pre-rendered, pre-angularized html) implements an ng-repeat on an array of objects.

<carousel interval="myInterval">
    <slide ng-repeat="slide in slides" active="slide.active">
         <div class="carousel-caption">
             <h4>Slide {{$index}}</h4>
             <p>{{slide.text}}</p>
         </div>
    </slide>
</carousel>

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?

The directive is implemented as:

.directive('carousel', [function() {
  return {
    restrict: 'EA',
    transclude: true,
    replace: true,
    controller: 'CarouselController',
    require: 'carousel',
    templateUrl: 'template/carousel/carousel.html',
    scope: {
      interval: '=',
      noTransition: '=',
      noPause: '='
    }
  };
}])

And the template at carousel.html is below. Notice the reference to "slides()" in the li repeater.

angular.module("template/carousel/carousel.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/carousel/carousel.html",
    "<div ng-mouseenter=\"pause()\" ng-mouseleave=\"play()\" class=\"carousel\">\n" +
    "    <ol class=\"carousel-indicators\" ng-show=\"slides().length > 1\">\n" +
    "        <li ng-repeat=\"slide in slides()\" ng-class=\"{active: isActive(slide)}\" ng-click=\"select(slide)\"></li>\n" +
    "    </ol>\n" +
    "    <div class=\"carousel-inner\" ng-transclude></div>\n" +
    "    <a class=\"left carousel-control\" ng-click=\"prev()\" ng-show=\"slides().length > 1\"><span class=\"icon-prev\"></span></a>\n" +
    "    <a class=\"right carousel-control\" ng-click=\"next()\" ng-show=\"slides().length > 1\"><span class=\"icon-next\"></span></a>\n" +
    "</div>\n" +
    "");
}]);

Update

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. :^)

var self = this,
    slides = self.slides = [],
    ....;

$scope.slides = function() {
    return slides;
};