AngularJS Images Not Displaying on Screen

Images are not displaying on screen for slideshow carousel. In the console under elements, I clearly see the path: but they are not showing on the screen. Could someone please help with this? I have the images in subfolders and when i click a folder the image paths change correctly. Can't figure this one out. Thank you!

index.html

  <!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <script src="example.js"></script>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="CarouselDemoCtrl">
  <div style="height: 305px">
    <div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
      <div uib-slide ng-repeat="slide in slides">
        <img ng-src="{{uri}}/{{currentFolder}}/{{slide}}" style="margin:auto;">

        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="navbar navbar-default navbar-fixed-botom" role="navigation">
      <div class="container">
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li ng-repeat="folder in folders" ng-class="{active:activeFolder(folder)}" ng-click="selectFolder(folder)">
              <a ng-href="#{{folder}}">{{folder}}</a>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

  </div>
</div>
  </body>
</html>

example.js

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;

  var currentIndex = 0;

  $scope.uri = "slides";
    $scope.folders = ['cats','dogs'];
    $scope.slides = ["1.jpg","2.jpg","3.jpg"];
    $scope.currentFolder = $scope.folders[0];
    $scope.selectFolder = function (folder) {
      $scope.currentFolder = folder;
    };
    $scope.activeFolder = function (folder) {
      return (folder === $scope.currentFolder);
    };
});

Solution

Carousel is missing an index to find your slides. Add an id property to your slide, starting at 0. This way bootstrap can skip to the next index.

Change your HTML to:

<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <script src="example.js"></script>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div ng-controller="CarouselDemoCtrl">
    <div style="height: 305px">
        <div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
            <div uib-slide ng-repeat="slide in slides" index="slide.id">
                <img ng-src="{{uri}}/{{currentFolder}}/{{slide.image}}" style="margin:auto;">
                </img>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="navbar navbar-default navbar-fixed-botom" role="navigation">
                <div class="container">
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li ng-repeat="folder in folders" ng-class="{active:activeFolder(folder)}" ng-click="selectFolder(folder)">
                            <a ng-href="#{{folder}}">{{folder}}</a>
                            </li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

And your javascript to:

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;

var currentIndex = 0;

$scope.uri = "slides";
    $scope.folders = ['cats','dogs'];
    $scope.slides = [{image:"1.jpg", id:0},{image: "2.jpg", id:1},{image:"3.jpg", id:2}];
    $scope.currentFolder = $scope.folders[0];
    $scope.selectFolder = function (folder) {
    $scope.currentFolder = folder;
    };
    $scope.activeFolder = function (folder) {
    return (folder === $scope.currentFolder);
    };
});