Extra div created by ng-repeat - angularjs

Question

I am attempting to use angularJS to print out some data. Here is a relevant segment of the script:
$scope.incidentCats = [{
name: "FIRE",
incidents: [{
location: "location 1",
dateTime: "datetime 1",
currStatus: "currStatus 1"
},
{
location: "location 2",
dateTime: "datetime 2",
currStatus: "currStatus 2"
}]
},
{
name: "CODE BLUE",
incidents: [{
location: "location 3",
dateTime: "datetime 3",
currStatus: "currStatus 3"
}]
}];
As you can see in the data, incident type FIRE has records of two incidents, while incident type CODE BLUE has only one.
Here's the relevant code in the EJS file:
<div ng-repeat="category in incidentCats" class="incident">
<header class="category">
<strong>{{ category.name }}</strong>
</header>
<section>
<div ng-repeat="incident in category.incidents">
{{ incident.location }}<br>
{{ incident.dateTime }}<br>
{{ incident.currStatus }}<br>
</div>
</section>
</div>
Finally, here's my CSS for this particular section of the HTML (excluding any common CSS used for the whole project that is out of my hands):
.incident {
width: 100%;
height: 100%;
border: 1px solid #fff;
position: relative;
padding: 5px;
margin: 25px 0;
}
.incident section {
margin-top: 10px;
}
.incident section > div {
margin: 5px auto;
}
So far, the code works as expected except for one thing: when the div elements are created in the incident loop, I'm expecting two div to be created for the FIRE category and only one div for the CODE BLUE category. However, the code created two div for both categories.
That is not what I want. As a result of the second div in CODE BLUE containing <br> tags but no data because there is no second incident in the records for this category, there is now a section of empty space where this second div is location under the first div, which is fine because the first incident does exist and is correctly printed out. How can I rectify this?

Answer 1

Try using ng-repeat-start and ng-repeat-end
From Angular version 1.2 onwards, ng-repeat got two siblings directives named ng-repeat-start and ng-repeat-end. With these, we can explicitly specify the starting and ending for ng-repeat. So, instead of using the ng-repeat directive on one single DOM element, we can specify the ng-repeat-start and ng-repeat-end on any two DOM elements.
<div class="incident">
<header ng-repeat-start="category in incidentCats" class="category">
<strong>{{ category.name}}</strong>
</header>
<section ng-repeat-end>
<div ng-repeat="incident in category.incidents">
{{ incident.location }}<br>
{{ incident.dateTime }}<br>
{{ incident.currStatus }}<br>
</div>
</section>
</div>

Answer 2

I tried to replicate the behavior and I can see everything working well.
The ng-repeat is generating the HTML structure as it should. This might relate to the data you have posted. If the data posted is correct then HTML should work as expected. You can try sharing your exact code in order to debug the issue. I have used following array to reproduce the same:
$scope.incidentCats = [{
name: "FIRE",
incidents: [{
location: "location 1",
dateTime: "datetime 1",
currStatus: "currStatus 1"
},
{
location: "location 2",
dateTime: "datetime 2",
currStatus: "currStatus 2"
}]
},
{
name: "CODE BLUE",
incidents: [{
location: "location 3",
dateTime: "datetime 3",
currStatus: "currStatus 3"
}]
}];
Plnkr Link