flexslider is not working in angular popup

flexslider is not working in angular popup  using -'angularjs,bootstrap-modal,flexslider'

I have used jquery.flexslider.js for simple slider in my angular application.

<div id="product-slider" class="flexslider">
    <ul class="slides">

        <li data-thumb="{{ image.thumb_url }}" ng-repeat="image in tab2.images">
            <img ng-src="{{ image.original_url }}" alt="{{ image.asset_Id }}"/>

    <div class="slide-count">
        <span class="current-slide"></span>
        <span class="devider">&nbsp;/&nbsp;</span>
        <span class="total-slides"></span>


This tab2.images array is building dynamically after upload images. This flexslider is showing in bootstrap modal. So I have called flexsider after show popup.

function showPopup() {


        animation: "slide",
        controlNav: "thumbnails",
        slideshow: false,
        nextText: "",
        prevText: "",
        after: function(slider) {
            $('.current-slide').text(slider.currentSlide + 1);
        start: function(slider) {
            $('.current-slide').text(slider.currentSlide + 1);

Now issue is this slider is not working in first time. Second time it show only thumbnails. But after click another tab in browser it is showing slider. I don't know what is the issue and how it works in browser tab click.

asked Oct 13, 2015 by shikhar jain
0 votes

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
To avoid this verification in future, please log in or register.