How can we integrate bxslider in to Angularjs app? - angularjs

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