Read $scope.images from template

[Ryuno-Ki]

Because I don't know the URLs ahead of time, I needed a way to figure out them on runtime.

My solution was to add data-attributes in the server-side generated template like so:

<div data-ng-controller="GalleryController" data-lightbox-url="{{ backend.interpolated.url }}" data-lightbox-thumbnail="{{ backend.interpolated.url }}" data-lightbox-caption="{{ backend.interpolated.value }}">
    <img src="{{ data-lightbox-thumbnail.from.above }}" alt="{{ data-lightbox-caption.from.above }}" data-ng-click="openLightbox()" />
</div>

(One could render JSON into the data-attributes as well ;-))

In my GalleryController, I filled $scope.images like so:

$scope.images = [{
    url: $attrs.lightboxUrl,
    thumbUrl: $attrs.lightboxThumbnail,
    caption: $attrs.lightboxCaption
}];

I open the modal like

$scope.openLightbox = function() {
    Lightbox.openModal($scope.images, 0);
});

Feel free to extend your API :)

[compact]

This looks like a fine solution, but I don't know what you want to be added to the API. The implementation of the gallery controller and how you get your image data is completely up to you, and the lightbox library does not know anything about it.