AngularJS Directive - - angularjs

Question

I am trying to make a schedule. The object that I receive from my API is as follows:
schedule : {
id,
name,
shifts : []
}
// each shift is
shift : {
id,
schedule_id,
user,
tasks: []
}
// each task is
task: {
id,
shift_id,
time_start,
time_end
}
My HTML currently is (please see image below for a snapshot of what it looks like right now)
<div class="schedule">
<!-- This is the time of the day column, such as 10:00, 11:00 -->
<div id="clock"></div>
<div class="shifts">
<div class="shift" ng-repeat="shift in schedule.shifts">
<!-- The user assigned to this shift -->
<div class="user" ng-bind="shift.user"></div>
<!-- This is the time cells in 15min interval -->
<div class="cells">
<!-- Not going into detail, but this creates the cells
<div class="cell" ng-repeat="cell in cells"></div>
</div>
<!-- The tasks -->
<div class="tasks">
<div class="task" ng-repeat="task in shift.tasks"></div>
</div>
</div>
</div>
</div>
Right now, since the tasks are placed in their own container, then to bring the task down the right start time, I basically calculate how much the task.time_start is different than the start of the day, and then convert that to a CSS of top: $some-pixel (by multiplying time difference by the height of each cell).
I'd like to instant have these tasks bind to the cells. But how can I do that? The tasks are in an array inside shift.tasks, and I cannot figure out how I could loop through them while I am creating the cells.
Or maybe what I am doing is right?
Edit
The only thing that I can think of is having the ng-repeat inside the cell as well, and use ng-if
<div class="cells">
<div class="cell" ng-repeat="cell in cells">
<div class="task" ng-repeat="task in shift.task" ng-if="task.time_start = cell.time_start"></div>
</div>
</div>

Answer 1

Sounds like you need to loop the 15-min intervals instead of (or combined with) tasks. Create a cell for each, and then check the tasks and if there is a task present at that time - fill the cell.
EDIT
So yeah, basically, what you wrote in your edit - so render both the empty and non-empty cells and fill in the needed ones.
Something like this:
<div class="cells">
<div class="cell" ng-repeat="cell in cells">
<div class="subcell" ng-repeat="subcell in subcells"> <!-- 4 subcells -->
<div class="task" ng-repeat="task in shift.task" ng-if="task.time_start = subcell.time_start"></div>
</div>
</div>
</div>
I used ng-if="task.time_start = subcell.time_start", but you can modify it however you want, maybe like cell.time_start + subcellIndex * 15, etc...