Bootstrap carousel stops after last item

Question

I have already read all the questions about this but stills happening to me. In my html i'm using angular with carousel and my problem is that in the las item, it doesn't cycle anymore. It does work if i click left button but not with the right button. This is my code

<div id="filters-carousel" data-interval="false" class="container-fluid carousel slide issue-div-wrapper" data-ride="carousel">
  <div class="container filters-carousel carousel-inner issue-div" role="listbox" ng-show="filterContent['{{key}}']" ng-repeat="(key, values) in filterContent.filters">
    <ul class="item" ng-class="{active : $index == 0}" ng-repeat="v in values" ng-if="$index % 8 === 0">
      <li ng-repeat="v in values.slice($index, $index + 8)" ng-class="{active: filterContent.isSelectedValue(key, v)}" ng-click="filterContent.addFilter(key, v)">
        <a  class="issue-btn btn-default">{{v}}</a>
      </li>
    </ul>
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#filters-carousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon glyphicon-menu-left" aria-hidden="true"></span>
  </a>
  <a class="right carousel-control" href="#filters-carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon glyphicon-menu-right" aria-hidden="true"></span>
  </a>
</div>

Answer 1

I don't know if mark as duplicate of the following link, are you using ngAnimate?

Take a look at: angularjs corousel stops working

It's a compatibility problem between ui.bootstrap and ngAnimate .... https://github.com/angular-ui/bootstrap/issues/1350

And here too: https://github.com/angular-ui/bootstrap/issues/1565

But someone posted his solution:

app.config(
    ['$animateProvider',
    function ($animateProvider) {
        $animateProvider.classNameFilter(/carousel/);
    }]);

This means ngAnimate is disabled for all elements in the application with the carousel class.

Could be your problem? Hope it helps!