I am working on an AngulerJS control for a back office preview that for a Carousel.

I have the following so far

angular.module("umbraco").controller("InPageCarouselController", function ($scope, $sce, mediaResource) {

var bdata = $scope.block.data;
var images = bdata.images;
var arrayLength = images.length;
var active = "";

var data = "";
var i = 0;
angular.forEach(images, function (myItem) {
    active = "";
    if (i == 0) {
        active = "active";
    }
    var imageUdi = images[i].mediaKey;
    console.log("Image ID:", imageUdi)

    var x  = mediaResource.getById(imageUdi).then(function (media) {
        console.log(media);
        //set a property on the 'scope' called imageUrl for the returned media object's mediaLink
        //$scope.imageUrl = media.mediaLink;
        return media.mediaLink;
    });

    console.log("Return Value:",x);

    i++;
}); 

/*
for (var i = 0; i < arrayLength; i++) {

    var x = mediaResource.getById(imageUdi).then(function (media) {
        console.log(media);
        //set a property on the 'scope' called imageUrl for the returned media object's mediaLink
        //$scope.imageUrl = media.mediaLink;
        return media.mediaLink;
    });

    console.log(x);
}*/
console.log("loop End!");
$scope.trustedContent = $sce.trustAsHtml(data);

});

I need to know how to make it wait for the return value in to X and then get the URL.

It seems to finish the foreach but not returned the value from " mediaResource.getById(imageUdi)"