It seems like ng-init may not function in the way you expect. Instead, consider modifying some of your controller or model code to include a boolean variable for
forecastAndActualForCellsAreNotEmpty
that can be updated accordingly.
Alternatively, you could achieve this using CSS. If
forecastAndActualForCellsAreNotEmpty
returns
false, then
getTotalHoursPercentageForCells may return 0. You could bind this value to a data attribute and apply a CSS rule to hide the div element. However, doing this without utilizing
ng-init would require taking control of the content using CSS as well, possibly through the use of
:before and
:after pseudo-elements.
<div class='text' data-percentage='{{getTotalHoursPercentageForCells(findCellsByDate(tableCells, day))}}'>
</div>
Corresponding CSS:
div[data-percentage=0]{
display: none;
}
div[data-percentage]:before{
content: attr(data-percentage) "%";
display: block;
}
While using :before or :after for displaying application content is not recommended, it can work for stylistic elements. Ultimately, I suggest considering adjustments to the model structure as the preferred solution.