UI Bootstrap carousel not rendering images

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>