I know this has been asked a thousand time, but I think I've tried every solution I've read and I can't seem to get it to work.

I have an API from which I'm getting my images, after pulling the images into the view I want them to use photoswipe for displaying on mobile.

I have a directive:

```
'use strict';

App.directive('photoswipe', function () {
return {
    replace: false,
    restrict: 'A',
    link: function photoSwipeLink(scope, element, attr) {
      scope.$watch(attr.photoswipe, function(value){
        angular.element('#gallery a').photoSwipe({
          enableMouseWheel: false,
          enableKeyboard: false
        });
      });
    }
  };
});

```

I get this error in the console:

```
Code.PhotoSwipe.createInstance: No images to passed.

```

I guess this is because the directive is running before the view has rendered.

If I add a $timeout instead of watch then the code does work. Unfortunately this solution is no good, as there could be a delay in getting the data from API. Also, the code doesn't work within the timeout.

I have tried, the above code, I've tried using $viewcontentloaded, have tried firing function after last element in ng-repeat, but neither work.

Any help would be much appreciated.

EDIT:

Here's the HTML.

```
<h1>{{ gallery.headline }}</h1>
<ul id="gallery" photoswipe>
  <li class="gallery" ng-repeat="image in gallery.images">
    <a href="{{ image.url }}" alt="image.caption">
      <img ng-src="{{ image.thumb_url }}" class="thumb" alt="{{ image.caption }}" style="display: block;">
      <h3 class="headline">{{ image.caption }}</h3>
    </a>
  </li>
</ul>

```