title: Conditionally change img src based on model data
body: <p>I want to represent model data as different images using Angular but having some trouble finding the "right" way to do it.  The Angular <a href="http://docs.angularjs.org/guide/expression" rel="noreferrer">API docs on expressions</a> say that conditional expressions are not allowed...</p>
  
  <p>Simplifying a lot, the model data is fetched via AJAX and shows you the status of each interface on a router.  Something like:</p>
  
  <pre><code>$scope.interfaces = ["UP", "DOWN", "UP", "UP", "UP", "UP", "DOWN"]
  </code></pre>
  
  <p>So, in Angular, we can display the state of each interface with something like:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li ng-repeat=interface in interfaces&gt;{{interface}}
  &lt;/ul&gt;
  </code></pre>
  
  <p>BUT - Instead of the values from the model, I'd like to show a suitable image.  Something following this general idea.</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li ng-repeat=interface in interfaces&gt;
      {{if interface=="UP"}}
         &lt;img src='green-checkmark.png'&gt;
      {{else}}
         &lt;img src='big-black-X.png'&gt;
      {{/if}}
  &lt;/ul&gt;
  </code></pre>
  
  <p><em>(I think Ember supports this type of construct)</em></p>
  
  <p>Of course, I could modify the controller to return image URLs based on the actual model data but that seems to violate the separation of model and view, no?</p>
  
  <p><a href="https://stackoverflow.com/questions/13781685/angularjs-ng-src-equivalent-for-background-imageurl/13782311#13782311">This SO Posting</a> suggested using a directive to change the bg-img source.  But then we are back to putting URLs in the JS not the template...</p>
  
  <p>All suggestions appreciated.  Thanks.  </p>
  
  <p><em>please excuse any typos</em></p>