wow slider not working when images loading through http.get in angularjs ng-repeat

Question

I am using the wow slider plugin (jquery) in my project(angularjs and webforms asp.net)... sometimes slider loads fine but sometimes it doesn't load the images in the slider. I have done some research and came to know the problem was images are loading after the wow slider populated and generated the code.

I have tried to call the jquery function of destroying the old code and initialization of the wow slider.. but no luck I couldn't achieve the result.

Here's my code

HTML

<div class="col-xs-12">
    <div class="owl-carousel featuredProductsSlider">
       <div ng-repeat="x in homedata" class="slide">
          <div class="productImage clearfix">
            <img ng-src="{{x.productimage}}" alt="featured">
            <div class="productMasking">
              <ul class="list-inline btn-group" role="group">                       
                <li><a href="cart.aspx" class="btn btn-default">
                    <i class="fa fa-shopping-cart"></i></a></li>
                <li><a href="buy/{{x.productuniqueid}}" class="btn btn-default">
                    <i class="fa fa-eye"></i></a></li>
              </ul>
            </div>
          </div>
          <div class="productCaption clearfix">
            <a href="buy/{{x.productuniqueid}}">
              <h5>{{x.productname}}</h5>
            </a>
            <h3>${{x.price}}</h3>
          </div>
       </div>
    </div>
</div>

angularjs :

$scope.loadhome = function () {
    $http.post('index.aspx/gethomedata', {  })
    .success(function (data, status, headers, config) {
        //$scope.myData.fromServer = data.d;
        $scope.homedata = data.d;

        if ($scope.homedata.length > 0) {
          // alert("yes");
          $.fn.myFunction();
       }
    })
    .error(function (data, status, headers, config) {
        $scope.status = status;
        //alert($scope.status);
    });
}

Jquery

jQuery(document).ready(function () {
    $.fn.myFunction = function () {
        alert('You have successfully defined the function!');
        "use strict";
        var owl = $('.owl-carousel.featuredProductsSlider');

        owl.trigger('destroy.owl.carousel');
        owl.html(owl.find('.owl-stage-outer').html()).removeClass('owl-loaded');    
        //owl.empty();
        owl.owlCarousel({
            loop: true, margin: 28, autoplay: true,
            autoplayTimeout: 2000, autoplayHoverPause: true,
            nav: true, moveSlides: 4, dots: false,
            responsive: {
                320: { items: 1 }, 768: { items: 3 }, 992: { items: 4 }
            }
        });       
    }
});

Answer 1

Most probably your are initializeing wowslider when the digest cycle is not not finished and ng-repeat has not done loading images. $timeout will call in next digest cycle, you can try this. add $timeout dependency in the controller

$http.post('index.aspx/gethomedata', {  })
.success(function (data, status, headers, config) {
    //$scope.myData.fromServer = data.d;

    $scope.homedata = data.d;

    if ($scope.homedata.length > 0) {
      // alert("yes");
      $timeout(function () {
           $('#owl-...').myFunction();
      });
    }
})
.error(function (data, status, headers, config) {
    $scope.status = status;
    //alert($scope.status);
});