ng-if (Angularjs) is not working

Question

I am rendering json data to html page :

<div ng-if="'done'={{task_detail.status}}">
    <b>Status :</b> 
    <p class="label label-success">{{task_detail.status}}</p>
    <br>
    <br>
    <div class="progress progress-striped">
        <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:{{task_detail.percentage_finished}}%">
            <span class="sr-only">{{task_detail.percentage_finished}}% Complete</span>
        </div>
    </div>
</div>

Here is my rendered json data :

{
     "id": 1,
     "title": "Launch an EC Instance",
     "desc": "Needed an EC instance to deploy the ccr code",
     "status": "done",
     "percentage_finished": 100
 }

Issue : HTML view is not visible as control is not moving inside ng-if . Is syntax correct?

Answer 1

ngIf accepts an expression(JavaScript-like code snippet). This means anything written in between the " " is already inside Angular's context and you dont need to use {{ }}:

<div ng-if="task_detail.status == 'done'">