ng-if inside ng-repeat always returning true

Question

I am creating a table with data from the Premier League. I am trying to use ng-if to check if the home team won and if so add a cell saying "Home team won"

HTML

<div ng-if="data.full_time_result: === 'H'">
    <td>Home Team Won!</td>
</div>

However this is adding the "Home Team Won!" to every row even when the full_time_result isn't 'H'.

Here is a link to the plnkr.

Also, what would be the recommend way to achieve this functionality? Having lots of ng-if blocks probably isn't the best way to go about this.

Answer 1

You can not have div inside table element tr directly, it would make an invalid html. To make it working you could wrap that div in td tag.

Markup

<td>
    <div ng-if="data.full_time_result === 'H'">Home Team Won!</div>
</td>

Working Demo