AngularJs ng-if directive not working?
<p>I am very new to AngularJs so I'm unsure of the <code>ngif</code> syntax. I have a table and I need to change the class of the <code>&lt;td&gt;</code> depending on the value of <code>component.status</code>. 
Everything works except for the <code>ngif</code> directive</p>

<p>My Array: </p>

<pre><code>$scope.components = 
    [
    {type: "Dispacther",        component: "Dispatcher2",  created: "2016-05-20T01:44:56.113", status: "Live"},
    {type: "Mobilizer",         component: "Mobility3",    created: "2016-05-25T07:34:30.019", status: "Down"},
    {type: "Listener",          component: "ADT 22146",    created: "2016-05-20T01:44:56.113", status: "Live"},
    {type: "OutBound Charge",   component: "Billing 92",   created: "2016-05-20T01:44:56.113", status: "Live"},
    {type: "Listener",          component: "22064",        created: "2016-05-20T01:44:56.113", status: "Live"},
    {type: "Dispacther",        component: "Dispacther1",  created: "2016-05-21T00:48:50.433", status: "Warning"}
];
</code></pre>

<p>My attempt so far:</p>

<pre><code>  &lt;tr ng-repeat="component in components"&gt;
  &lt;td &gt;{{component.type}}&lt;/td&gt;
  &lt;td&gt;{{component.component}}&lt;/td&gt;
  &lt;td&gt;{{component.created}}&lt;/td&gt;
  &lt;td ng-if="component.status == Live" class="alert-success"&gt;{{component.status}}&lt;/td&gt;
  &lt;td ng-if="component.status == Warning" class="alert-warning"&gt;{{component.status}}&lt;/td&gt;
  &lt;td ng-if="component.status == Down" class="alert-danger"&gt;{{component.status}}&lt;/td&gt;
  &lt;/tr&gt;
</code></pre>