Карусель Angular Bootstrap-UI с использованием динамического контента

Я вообще не специалист по WP, но мой подход здесь будет состоять в том, чтобы перебирать результаты, которые вы получаете в контроллере «Получить сообщения», и переформатировать их в простые объекты JSON, которые будет использовать ваше слайд-шоу. Например:

angular.forEach($scope.posts, function(val, idx)
{
    var newObj = { body: val.postBody, ect: val.postEtc };
    $scope.slides.push(newObj);
});

То же самое относится к результатам СМИ; прокрутите их и выровняйте с вашими пользовательскими объектами. Если вы хотите получить к ним более легкий доступ, вы можете использовать нотацию массива вместо .push(), чтобы сделать доступ к объектам из каждого цикла очень быстрым, предполагая, что у вас есть идентификатор или что-то, с чем просто работать, например:

$scope.slides[val.postID] = { body: val.postBody, etc: val.postEtc };

Это означает, что теперь, когда вы просматриваете результаты мультимедиа, вы можете использовать ту же структуру цикла, что и сообщения, но изменить ее, чтобы установить нужное свойство объекта:

// While looping through media objects, assuming the media object has a postID
$scope.slides[media.postID].image = mediaObj.imageUrl;

И так далее.

Здесь есть предостережение... вы должны убедиться, что у вас есть посты и медиафайлы, прежде чем вы попытаетесь просмотреть их. Ваш текущий контроллер сделает оба вызова AJAX, как только будет создан экземпляр контроллера (когда angular компилирует директиву ng-controller в вашем представлении). Эти 2 вызова будут происходить асинхронно, поэтому порядок выполнения неизвестен; вы не можете полагаться на тайм-аут, вам придется связывать запросы с помощью q.defer(). Вам нужно будет немного переписать контроллер, внедрить $q в конструктор и связать промисы:

// store the app in a variable so you can write more modules / directives with it
var app = angular.module('app', ['ngRoute', 'ui.bootstrap' ])

// Retrieves Posts
app.controller('Main', function($scope, $http, $routeParams, $q){
    // create a deferred object
    var def = $q.defer();
    var promises = []; // Array of promises for our deferred wrapper

    // All HTTP requests return a promise object; push it on to our array
    promises.push($http.get('wp-json/posts/').success(function(res){
        $scope.posts = res;
    }));

    // Push the 2nd promise
    promises.push($http.get('wp-json/media/').success(function(res){
        $scope.media = res;
    }));

    // Process when all are complete
    def.all(promises).then(function(res)
    { // Successful (promise resolved)
      // Loop through the results in $scope.posts / $scope.media, build your objects
    }, function(res)
    { // Failed (promise rejected)
      // Do something here if a promise is rejected
    });
});

Ваша карусель пользовательского интерфейса должна обновляться по мере изменения массива слайдов!