Угловая директива не работает с ng-repeat

Question

Привет Я пытаюсь запустить слайдер JQuery Flex. Flex слайдер работать без нг-повторять, как здесь: http://plnkr.co/edit/aVC9fnRhMkKw3xfpm4No?p=preview

Но не работает с использованием нг-повторить, как это:

http://plnkr.co/edit/nW3i9bmUwtlbXn2Vhy4O?p=preview

директива:

.directive('flexslider', function() { 

return { 
link: function (scope, element, attrs) { 

    element.flexslider({ 
    animation: "slide" 
    }); 
} 
} 
}); 

работает themplate:

<div class="flexslider" flexslider> 
    <ul class="slides"> 
    <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> 
    <li> 
     <img src="http://placekitten.com/g/400/200"> 
    </li> 
    </ul> 
</div> 

Не работает themplate:

<div class="flexslider" flexslider> 
    <ul class="slides"> 
    <li ng-repeat="n in list"> 
     <img src="http://placekitten.com/g/400/200"> 
    </li> 
    </ul> 
</div> 

список в mainCtrl:

$scope.liste = [1,2,3,4,5]; 

Answer 1

директива была уволена до начала процесса повторной

это исправляет проблему:

setTimeout(function(){ 
    element.flexslider({ 
     animation: "slide" 
    }); 
    },500); 

работает здесь http://plnkr.co/edit/rZN49pPm7lQdYnECGiM9?p=preview

Answer 2

Это связано с ленивой нагрузкой img.

Вы можете использовать следующие

и в функции MYFOO просто призываю FlexSlider

$scope.myFoo = function(){ 
    $(".flexslider").flexslider({ 
     animation: "slide" 
     }); 
    } 

Вот Fiddler

Или вы можете по этой ссылке Lazy Load Flex