How can we integrate bxslider in to Angularjs app?

Question

Iam using bxslider in Angularjs app.But when I use ng-repeat it is not working.Below is the angular code. Thanks in Advance.

<ul class="bxslider" ng-repeat="image in vm.listFullProductDetails[0].ProductImage">
                                            <li>
                                                <img src="/{{image.ProductimageFilepath}}" />

                                            </li>

                                        </ul>

When I remove ng-repeat and add some images , it works fine.How can i resolve the problem.Below is the code.

<ul class="bxslider">
                                    <li>
                                        <!--<img ng-src="/{{image.ProductimageFilepath}}" />-->
                                        <img src="/Images/user4.jpg" />
                                    </li>
                                    <li>
                                        <!--<img ng-src="/{{image.ProductimageFilepath}}" />-->
                                        <img src="/Images/user4.jpg" />
                                    </li>
                                    <li>
                                        <!--<img ng-src="/{{image.ProductimageFilepath}}" />-->
                                        <img src="/Images/user4.jpg" />
                                    </li>
                                    <li>
                                        <!--<img ng-src="/{{image.ProductimageFilepath}}" />-->
                                        <img src="/Images/user4.jpg" />
                                    </li>
                                    <li>
                                        <!--<img ng-src="/{{image.ProductimageFilepath}}" />-->
                                        <img src="/Images/user4.jpg" />
                                    </li>
                                    <li>
                                        <!--<img ng-src="/{{image.ProductimageFilepath}}" />-->
                                        <img src="/Images/user4.jpg" />
                                    </li>
                                </ul>

Answer 1

The problem is you are repeating the ul tag and thereby repeating class="bxslider". This causes every image to be wrapped within a ul and treat them as separate slider.

            <ul class="bxslider">
               <li ng-repeat="slide in slides">
                 <img ng-src="{{slide.src}}" alt="" />
               </li>
              </ul>

Check this solution by Richard Chu -> http://codepen.io/funkybudda/pen/pnmou