angularjs - How can I get directive to fire after view loaded? -

i know has been asked thousand time, think i've tried every solution i've read , can't seem work.

i have api i'm getting images, after pulling images view want them use photoswipe displaying on mobile.

i have 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 error in console:

code.photoswipe.createinstance: no images passed. 

i guess because directive running before view has rendered.

if add $timeout instead of watch code work. unfortunately solution no good, there delay in getting data api. also, code doesn't work within timeout.

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

any appreciated.

edit:

here's 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> 

i think happening because angular processing directive before results bound list. race condition. 1 way solve

$scope.$broadcast("picsdownloaded" ...  

event in controller after results. on directive, instead of

scope.$watch(attr.photoswipe .... 

do this

scope.$on("picsdownloaded" .... 

and in handler apply jquery plugin.