UI Bootstrap carousel not rendering images - angularjs

Question

ui-bootstrap seems not to render my images.
-When using regular <img ng-source =""> The images rendering just fine like they suppose to.
- When using angular ui Carousel they seem not to render for me. I get nothing. I'm not sure what the issue is at this point here is a snippet of my code.
<div style="height: 305px">
<uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<uib-slide ng-repeat="image in selectedBridgeImages">
<img ng-src="{{getImage(image.Base64String)}}"/>
<div>
{{image.Id}}
</div>
</uib-slide>
</uib-carousel>
</div>
and here is everything I use in my angular controller
$scope.selectedBridgeImages = [];
$scope.getImage = function (data) {
return 'data:image/JPEG;base64,' + data;
}
$scope.selectBridge = function (selectedBridge) {
bridgeService.getBridgeDetails(selectedBridge.BridgeID).then(bridgeDetailsThen);
$scope.isBridgeSelected = true;
$scope.selectedBridge = selectedBridge;
}
var bridgeDetailsThen = function (response) {
$scope.selectedBridgeImages = response.data.Picture;
}
and a C# service call here
[HttpGet]
[Route("api/Bridge/GetBridgeDetails/{bridgeId}")]
public IHttpActionResult GetBridgeDetails(int bridgeId)
{
try
{
using (_iBridge)
{
var details = _iBridge.GetBridgeDetailses(bridgeId);
foreach (var picture in details.Picture) { picture.Base64String = Convert.ToBase64String(picture.PictureBytes); }
return Ok(details);
}
}
catch
{
return NotFound();
}
}

Answer 1

I was facing the same problem. First, I tried to wrap uib-carousel and uib-slide inside 'div' tags: after that I was able to see the carousel's arrows, but still no images. I found out later that the problem was the 'index' atribute of uib-slide: it seems you are supposed to provide an index, even if you don't use it for anything. Try this modified version of your code:
<div style="height: 305px">
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="image in selectedBridgeImages track by $index" index="$index">
<img ng-src="{{getImage(image.Base64String)}}" />
<div>
{{image.Id}}
</div>
</div>
</div>