Flexslider does not work properly when using ng-repeat

Question

I am having problems with the flex slider as it stops working if I use ng-repeat. Otherwise, his work fine.

myApp.controller('frontCtrl', function ($scope) { var results = {"id":4,"title":"sddddddd", "photos":[{"url":"http://placekitten.com/g/400/200","id":1},{"url":"http://placekitten.com/g/400/200","id":2}]}; $scope.images=results.photos }); myApp.directive('flexslider', function () { return { link: function (scope, element, attrs) { element.flexslider({ animation: "slide" }); } } }); 

HTML

  <div class="flexslider" flexslider> <ul class="slides"> /* This wont work*/ <li ng-repeat="img in images"> <img src="{{img.url}}"> </li> /* This work*/ <li> <img src="http://placekitten.com/g/400/200"> </li> <li> <img src="http://placekitten.com/g/400/200"> </li> <li> <img src="http://placekitten.com/g/400/200"> </li> </ul> </div> 

I recreated this problem in plunker http://plnkr.co/edit/P2AOwQY0fQSMSXUQbc9t?p=preview

Answer 1

You must defer flexslider until everything inside your directive is shown. You can use the $timeout service:

 myApp.directive('flexslider', function ($timeout) { return { link: function (scope, element, attrs) { $timeout(function(){ element.flexslider({ animation: "slide" }); }) } } }); 

See plnkr .

Answer 2

For some reason, the directive did not work for me, so after a long trial and a period of errors, I came up with the following:

 function startSlideShow() { jQuery('.slideshow').flexslider({ animation: "slide", animationLoop: false, itemWidth: 240, controlNav: false }); jQuery('#menu-section a.dropdown-toggle').click(function () { jQuery('#menu-section .dropdown-menu').toggle(); }) } 

and just call this after you have downloaded everything (my images come from a URL loaded at runtime):

 setTimeout( startSlideShow, 10)