Загрузочная карусель, следующие и предыдущие изображения не отображаются

 $(document).ready(function(){
           
            $scope.vehicleImageList = {};
            $http.get('http://localhost:8087/mmg/api/v1/franchisevehicleimages/'+$scope.source, {
                headers: {
                    XXXXXXXXXXXXXXXXx

                }
            }).then(function (results2) {
                $scope.vehicleImageList = results2.data.data;
            });
    
            $(function(){
                
                        $('.carousel-control').click(function(e){
                            e.preventDefault();
                            $('#myCarousel').carousel( $(this).data() );
                        });
            })
            
            });

.carousel,
.carousel-inner,
.carousel-inner > .item {
    overflow: hidden;
}
.carousel-inner:before {
    position:absolute;
    top:0;
    bottom: 0;
    right: 82%;
    left: 0;
    content:"";
    display:block;
    background-color: #fff;
    z-index: 2;
}

.carousel-inner:after {
    position:absolute;
    top:0;
    bottom:0;
    right: 0;
    left: 82%;
    content:"";
    display:block;
    background-color:#fff;
    z-index: 2;
}

.carousel-control.left, .carousel-control.right {
    background: initial;
    width: 30%;
    color: #000;
    z-index: 10;
    top: -10px;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- image carousel -->
  <div class = "row">
  <div class = "item form-group">
  <div class = "col-md-11">  
      <div id = "myCarousel" class = "carousel slide" data-ride = "carousel" data-interval = "false">
          
          <!-- Wrapper for slides -->
          <div class = "carousel-inner">
              <div class = "item" ng-class = "{active:!$index}" ng-repeat = "list in vehicleImageList | unique:'name'">
              <img src = "./src/images/{{list.name}}" alt = "Vehicle" style = "height:150px;width:250px">
              <!-- <div class = "carousel-caption" style = "color:black">
                  <h3 class = "h3-responsive">Light mask</h3>
                  <p>First text</p>
            </div>  -->
          </div>
  
      
          <!-- Left and right controls -->
           <a class = "left carousel-control" href = "#myCarousel" data-slide = "prev">
            <span class = "glyphicon glyphicon-chevron-left"></span>
            <span class = "sr-only">Previous</span>
          </a>
          <a class = "right carousel-control" href = "#myCarousel" data-slide = "next">
            <span class = "glyphicon glyphicon-chevron-right"></span>
            <span class = "sr-only">Next</span>
          </a>
        </div>                            
   </div>
  </div>
  </div>
  </div>