How to render angular ng if/show within database

current I am working with a combination of datatables + angularjs. I'm following documentation here. https://l-lin.github.io/angular-datatables/archives/#!/gettingStarted

My table is rendering and getting populated with angularjs code. The issue I am coming across is I only want the photo text to appear only when it exist. When I inspect the element, ng-hide is always set. It'll appear fine if I remove ng-if.

Code

<table datatable="ng" class="contact-grid-table row-border" dt-options="vm.dtOptions2" dt-column-defs="vm.dtColumnDefs" dt-instance="dtInstanceCallback" id="tableId">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Photo</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="contact in vm.contacts">
            <td>{{contact.firstName}}</td>
            <td>{{contact.lastName}}</td>
            <td><span ng-if="contact.photo">{{contact.photo}}</span></td>
        </tr>
    </tbody>
</table>

I also tried the suggestion here ng-show not working in datatables columns but my table will no longer load. Page just freezes.

May I ask if there's any suggestions on how to get ng-if/show to work with datatables.

vm.dtOptions2 = DTOptionsBuilder.newOptions()
    .withOption('createdRow', function (row, data, dataIndex) {
        // Recompiling so we can bind Angular directive to the DT
        $compile(angular.element(row).contents())($scope);
    })
    .withOption('headerCallback', function (header) {
        if (!vm.headerCompiled) {
            // Use this headerCompiled field to only compile header once
            vm.headerCompiled = true;
            $compile(angular.element(header).contents())($scope);
        }
    })
    .withPaginationType('full_numbers').withOption('responsive', true)
    .withColReorder()
    .withColReorderOrder([0,1, 2,3])
    .withScroller()
    .withOption('bFilter', false) // for search box
    .withOption('bInfo', false) // for showing counts at the bottom
    .withOption('deferRender', true)
    .withOption('scrollY', 200)
    // Set order
    // Fix last right column
    .withDisplayLength(2)
    .withFixedHeader({
        bottom: false
    });