AngularJs: issue in including ng-repeat in a carousel

Question

I'm using a flexslider to create a carousel and I'm using the ng-repeat to display the required list in that carousel.

What I want is it show one item in one slide as it should but it displays the whole list in the 1st slide and in the 2nd slide it shows only the 1st item as many times as the size of the list itself.

Please help, thanks.

 <div class="page" ng-controller="mainController" >
    <section class="container-fluid">
        <div class="row-fluid bg-white">
            <div class="flexslider">
                <ul class="slides" ng-repeat="f in feed" >
                    <li class="carousel-bg1 ">
                        <div class="carousel-data">
                            <div class="carousel-text">
                                <h5><span>{{f.time}}</span></h5>
                            </div>
                            <div class="row-fluid testimonial-spec">
                                <article class="span10 carousel-text">
                                    <p>{{f.news}}</p>
                                </article>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div><!-- row-fuild : ends -->
    </section> <!-- container-fluid : ends-->
</div> <!-- competitions-carousel : ends -->

Answer 1

You are repeating the sliders ul list and most likely want to repeat the li list item. Give this a try:

<div class="page" ng-controller="mainController" >
    <section class="container-fluid">
        <div class="row-fluid bg-white">
            <div class="flexslider">
                <ul class="slides">
                    <li class="carousel-bg1"  ng-repeat="f in feed">
                        <div class="carousel-data" >
                            <div class="carousel-text">
                                <h5><span>{{f.time}}</span></h5>
                            </div>
                            <div class="row-fluid testimonial-spec">
                                <article class="span10 carousel-text">
                                    <p>{{f.news}}</p>
                                </article>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div><!-- row-fuild : ends -->
    </section> <!-- container-fluid : ends-->
</div> <!-- competitions-carousel : ends -->