ui bootstrap tpl version 2.5.0 not supporting carousel - angularjs

Question

I have struggling with following issue since 2 days. I need to implement modal popup, where I got the "Unknown provider: $uibModalProvider" error. So I upgraded the version of ui-bootstrap-tpls.min.js from 0.10.0 to 2.5.0. It fixed my modal popup issue, but it ruined my carousel completely. Please help me out.
I'm using
Angular Version - 1.5.3
ui bootstrap min. js version - 1.3.3
ui-bootstrap-tpls.min.js - 2.5.0
<script src="lib/angular/angular-ui-bootstrap/ui-bootstrap.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular-route.min.js"></script>
<script src="lib/angular/angular-animate/angular-animate.min.js"></script>
<script src="lib/angular/angular-sanitize/angular-sanitize.js"></script>
<script src="lib/angular/angular-ui-router/angular-ui-router.js"></script>
<script src="lib/angular/angular-ocLazyLoad/ocLazyLoad.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<carousel interval="myInterval">
<slide active="guide.active">
<div class="fill" style="background-image:url('{{guide.image}}');"></div>
<div class="carousel-caption">
<h4>{{guide.type}}</h4>
<h5>{{guide.time_duration}}</h5>
</div>
<div class="carousel-caption-hover">
<h4>{{guide.type}}</h4>
<h5>{{guide.time_duration}}</h5>
<div class="btn-row">
<a ui-sref="root.guide({city_slug: '{{cityData.slug}}', guide_type_slug: '{{guide.slug}}'})" ui-sref-opts="{reload: true}">Book Now</a>
</div>
</div>
</slide>
</carousel>
app.controller('GuideCtrl', function ($scope, $rootScope, WebService) {
$scope.myInterval = 3000;
WebService.GuideType().then(function (response) {
if (response.success){
$scope.guides = response.data;
$rootScope.guidesList = $scope.guides;
}
});
});
I appreciate any help.
Thanks

Answer 1

This is the complete solution which worked for my issue.
I've removed
<script src="lib/angular/angular-ui-bootstrap/ui-bootstrap.min.js"></script>
And downgraded uib version from 2.5.0 to 1.2.1
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.1/ui-bootstrap-tpls.min.js"></script>
Also changed html in this way
<uib-carousel interval="myInterval">
<uib-slide ng-repeat="g in guide" index="$index">
<div class="fill" style="background-image:url('{{guide.image}}');"></div>
<div class="carousel-caption">
<h4>{{guide.type}}</h4>
<h5>{{guide.time_duration}}</h5>
</div>
<div class="carousel-caption-hover">
<h4>{{guide.type}}</h4>
<h5>{{guide.time_duration}}</h5>
<div class="btn-row">
<a ui-sref="root.guide({city_slug: '{{cityData.slug}}', guide_type_slug: '{{guide.slug}}'})" ui-sref-opts="{reload: true}">Book Now</a>
</div>
</div>
</uib-slide>
</uib-carousel>
Added this to script
$scope.noWrapSlides = false;

Answer 2

You have two different versions of the same library
<script src="lib/angular/angular-ui-bootstrap/ui-bootstrap.min.js"></script>
and
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
Remove the first one
also, use the new prexied directive uib-carousel
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</div>