Угловая директива, созданная классом, не работающая при использовании атрибута из массива объектов, но работает при непосредственном обращении к объекту

Я использую метод создания экземпляров класса Angular Directive для группы директив в моем проекте, чтобы создать страницу панели инструментов в моем приложении.

Я использую Gridster в своем проекте:

<div gridster>
    <ul>
        <li gridster-item="item" ng-repeat="item in vm.standardItems track by $index">
            <div class="item.name" data="item.data" size="item.size"></div>
        </li>
    </ul>
</div>

Мой контроллер:

// these map directly to gridsterItem directive options
vm.standardItems = [
    { sizeX: 2, sizeY: 2, row: 0, col: 0, name: 'rows-processed-per-month', data: vm.retrieveRowData(), size: 400 },
    { sizeX: 2, sizeY: 2, row: 0, col: 2, name: 'jobs-runs-per-month', data: vm.retrieveRowData(), size: 400 },
    { sizeX: 2, sizeY: 2, row: 0, col: 4, name: 'match-discrepancies-remaining', data: vm.retrieveRowData(), size: 400 }
];

Теперь это не сработает.

Тем не менее, это делает работу:

<div gridster>
    <ul>
        <li gridster-item="item">
            <div class="vm.reports.rowsProcessedPerMonth.name" data="vm.reports.rowsProcessedPerMonth.data" size="vm.reports.rowsProcessedPerMonth.size"></div>
        </li>
        <li gridster-item="item">
            <div class="vm.reports.jobsRunPerMonth.name" data="vm.reports.jobsRunPerMonth.data" size="vm.reports.jobsRunPerMonth.size"></div>
        </li>
        <li gridster-item="item">
            <div class="vm.reports.matchDiscrepanciesRemaining.name" data="vm.reports.matchDiscrepanciesRemaining.data" size="vm.reports.matchDiscrepanciesRemaining.size"></div>
        </li>
    </ul>
</div>

Использование объекта:

vm.reports = {
        rowsProcessedPerMonth: {
            name: 'rows-processed-per-month',
            data: vm.retrieveRowData(),
            size: 400,
        },
        jobsRunPerMonth: {
            name: 'jobs-runs-per-month',
            data: vm.retrieveJobRunCountPerMonth(),
            size: 400,
        },
        matchDiscrepanciesRemaining: {
            name: 'match-discrepancies-remaining',
            data:  vm.retrieveMatchDiscrepanciesRemainingOnActiveJobs(),
            size: 400,
        }
    };

Даже если я сделаю это прямо:

<li gridster-item="item">
    <div class="vm.standardItems[0].name" data="vm.standardItems[0].data" size="vm.standardItems[0].size"></div>
</li>

Он не создает мою директиву.

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