Правильный подход к генерации компонентов на основе данных API

У меня есть структура в моем проекте, что-то вроде этого:

Нижний колонтитул и заголовок представляют собой вложенные представления.

index.html: <div data-ui-view="header"></div> <div data-ui-view="main"></div> <div data-ui-view="footer"></div>

маршрутизации:

$stateProvider
        .state('index', {
            abstract: true,
            views: {
                'header': {
                    component: 'headerComponent'
                },
                'footer': {
                    component: 'footerComponent'
                }
            }
        })

        .state('index.home', {
            url: '/',
            views: {
                'main@': {
                    templateUrl: 'boxesTemplate.html'
                }
            }
        });

Основной раздел должен включать в себя коробки (которые, вероятно, являются компонентами?), Как вы можете видеть на скриншоте. Но количество ящиков и их содержимое (например, заголовок коробки) должны генерироваться данными, которые извлекаются из бэкэнд с помощью $ http. Я хочу использовать компонент для связи с API. Могу ли я это достичь?

благодаря