asp.net - Ng-bootstrap Carousel refuses to show Images -

i'm upgrading old version of bootstrap (0.13.4 & 0.14.1) new version of it.

the old slider worked fine, doesn't show images anymore, when new file in use. makes sense, due fact, syntax of bootstrap has changed since version.

this original code:

<div class="ecp-carousel">     <uib-carousel interval="5000" no-wrap="false">         <uib-slide ng-repeat="slide in e.slides " active="slide.active">             <div class="slidcontainer clearfix">                 <img ng-src="{{slide.image}}" style="margin:auto;">             </div>         </uib-slide>     </uib-carousel> </div> 

this code came with:

<div class="ecp-carousel">     <div uib-carousel interval="5000" no-wrap="false" class="carousel-indicators">         <div uib-slide ng-repeat="slide in e.slides" index="slide.id" class="item">             <img ng-src="{{slide.image}}" style="margin:auto;">             <div class="slidcontainer clearfix">                        </div>         </div>     </div> </div> 

now, doesn't display images unless, manually go inspector in browser(ctrl + shift + ) inspect code , add class "active" hand, 1 image, should displayed.
controls still won't work. , if multiple images, they'll displayed below each other.

this documentation of slider: https://angular-ui.github.io/bootstrap/

i hope can me.

thank guys (and girls).

active required attribute , has specified otherwise the angular error thrown. according the documentation:

active (default: index of first slide) - index of current active slide.

in addition carousel-indicators class should omitted uib-carousel directive, used carousel indicators.

fixed carousel:

<div class="ecp-carousel">         <div uib-carousel active="0" interval="5000" no-wrap="false">             <div uib-slide ng-repeat="slide in e.slides" index="slide.id" class="item">                 <img ng-src="{{slide.image}}" style="margin:auto;">                 <div class="slidcontainer clearfix">                 </div>             </div>         </div>     </div>   

example

angular.module('ui.bootstrap.demo', ['nganimate', 'ngsanitize', 'ui.bootstrap']);  angular.module('ui.bootstrap.demo').controller('carouseldemoctrl', function ($scope) {    $scope.myinterval = 5000;    $scope.nowrapslides = false;    $scope.active = 0;    $scope.e = {};    var slides = $scope.e.slides = [];    var currindex = 0;      $scope.addslide = function() {      var newwidth = 600 + slides.length + 1;      slides.push({        image: 'http://placekitten.com/' + newwidth + '/300',        text: ['nice cat','awesome photograph','cute kitten','home animals'][slides.length % 4],        id: currindex++      });    };            (var = 0; < 4; i++) {      $scope.addslide();    }        });

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>   <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.2.0.js"></script>   <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">    <div ng-app="ui.bootstrap.demo" ng-controller="carouseldemoctrl">                      <div class="ecp-carousel">      <div uib-carousel active="0" interval="5000" no-wrap="false">          <div uib-slide ng-repeat="slide in e.slides" index="slide.id" class="item">              <img ng-src="{{slide.image}}" style="margin:auto;">              <div class="slidcontainer clearfix">                         </div>          </div>      </div>  </div>        </div>