title: AngularJs: Add class based on Model
body: <p>Just trying to apply a class if something is true. The documentation is very brief on <a href="http://docs.angularjs.org/api/ng.directive:ngClass">http://docs.angularjs.org/api/ng.directive:ngClass</a></p>
  
  <p>Trying to add a class of <code>favorite</code> on the <code>li</code> if <code>1 === true</code></p>
  
  <p>Here's my Mock Object</p>
  
  <pre><code>    $scope.restaurantListFromSearch = [
          {restaurantName: "Zocala",
          details: {
              image: "http://placehold.it/124x78",
              url: "#",
              cuisineType: ["Sandwiches", "American", "BBQ"],
              description: "Modern, healthy, awesome BBW",
              priceRange: "$",
              userFavorite: 0
          }},
          {restaurantName: "Subway",
          details: {
              image: "http://placehold.it/124x78",
              url: "#",
              cuisineType: ["Sandwiches", "American", "BBQ"],
              description: "Modern, healthy, awesome BBW",
              priceRange: "$",
              userFavorite: 1
          }},
          {restaurantName: "Hungry Howies",
          details: {
              image: "http://placehold.it/124x78",
              url: "#",
              cuisineType: ["Sandwiches", "American", "BBQ"],
              description: "Modern, healthy, awesome BBW",
              priceRange: "$",
              userFavorite: 0
          }}                      
      ];
  </code></pre>
  
  <p>And here's my markup.</p>
  
  <pre><code>        &lt;ul&gt;
              &lt;li ng-repeat="restaurant in restaurantListFromSearch" ng-class="{restaurant.details.userFavorite === 1: favorite}"&gt;
                  &lt;img src="{{restaurant.details.image}}" alt="{{restaurant.restaurantName}}"&gt;
  
                  &lt;div class="details"&gt;
                      &lt;a href="{{restaurant.details.url}}"&gt;{{restaurant.restaurantName}}&lt;/a&gt;
                      &lt;span class="cuisine-type"&gt;{{restaurant.details.cuisineType}}&lt;/span&gt;
                      &lt;p&gt;{{restaurant.details.description}}&lt;/p&gt;
                      &lt;span class="price-rating"&gt;{{restaurant.details.priceRange}}&lt;/span&gt;
                  &lt;/div&gt;
  
                  &lt;div class="clear"&gt;&lt;/div&gt;   
              &lt;/li&gt;&lt;!-- end restaurant result --&gt;                                                                 
          &lt;/ul&gt;
  </code></pre>
  
  <p>Added jsFiddle for readability, doesn't actually work due to missing dependencies (requireJs, etc)</p>
  
  <p><a href="http://jsfiddle.net/HtJDy/">http://jsfiddle.net/HtJDy/</a></p>
  
  <p>Can anyone point me in the right direction? :}</p>