title: How can I get directive to fire after view loaded?
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>I have a directive:</p>
  
  <pre><code>'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
          });
        });
      }
    };
  });
  </code></pre>
  
  <p>I get this error in the console:</p>
  
  <pre><code>Code.PhotoSwipe.createInstance: No images to passed.
  </code></pre>
  
  <p>I guess this is because the directive is running before the view has rendered.</p>
  
  <p>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.</p>
  
  <p>I have tried, the above code, I've tried using $viewcontentloaded, have tried firing function after last element in ng-repeat, but neither work.</p>
  
  <p>Any help would be much appreciated.</p>
  
  <p>EDIT:</p>
  
  <p>Here's the HTML.</p>
  
  <pre><code>&lt;h1&gt;{{ gallery.headline }}&lt;/h1&gt;
  &lt;ul id="gallery" photoswipe&gt;
    &lt;li class="gallery" ng-repeat="image in gallery.images"&gt;
      &lt;a href="{{ image.url }}" alt="image.caption"&gt;
        &lt;img ng-src="{{ image.thumb_url }}" class="thumb" alt="{{ image.caption }}" style="display: block;"&gt;
        &lt;h3 class="headline"&gt;{{ image.caption }}&lt;/h3&gt;
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>