So I have an ng-repeat within an ng-repeat. The inner ng-repeat references "item in recipe.ingredients". The problem is that each of these "items" have special characters which don't render unless I use ng-bind-html. But when I attempt to use ng-bind-html it doesn't work. Here is the html:
This works but doesn't display the special characters correctly (fractions for ingredients measurements):
<div class="row" ng-repeat="recipe in recipes"> <h1 class='title'> {{ recipe.title }} </h1> <div class="col-md-5"> <div class="list-group"> <div class="list-title">Ingredients</div> <p class="list-group-item" ng-repeat="item in recipe.ingredients">{{item}}</p> </div> </div> </div> My attempt at using ng-bind-html instead (which doesn't work):
<div class="row" ng-repeat="recipe in recipes"> <h1 class='title'> {{ recipe.title }} </h1> <div class="col-md-5"> <div class="list-group"> <div class="list-title">Ingredients</div> <p class="list-group-item" ng-repeat="item in recipe.ingredients" ng-bind-html="item"></p> </div> </div> </div> example of an "item" in the ng-repeat:
{ id: 1, img: "images/beefThumbnail.jpg", title: "Potatoes Supreme", servings: "Servings: 8 - 10", ingredients: [ "6 medium potatoes, peeled", "Salt", "½ cup butter or margarine, melted", "2 cups shredded Cheddar cheese", "⅓ cup chopped green onion", "1 pint sour cream", "¼ teaspoon pepper", "½ teaspoon salt" ], directions: [ "Oven 350°", "Cook potatoes in boiling salted water until done", "The next day grate potatoes coarsely", "Mix with remaining ingredients", "Place in shallow 1.5 or 2 quart baking dish and bake about 35 minutes" ] },//end potatoesSupreme 
itemfor instance? And when you say it doesn't work, you mean you don't see anything right?