Angular ng-bind-html inside a nested ng-repeat

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",
                "&frac12; cup butter or margarine, melted",
                "2 cups shredded Cheddar cheese",
                "&frac13; cup chopped green onion",
                "1 pint sour cream",
                "&frac14; teaspoon pepper",
                "&frac12; teaspoon salt"
            ],
            directions: [
                "Oven 350&#176;",
                "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

回答1:

Use $sce, also don't forget to inject it into controller

$scope.trustAsHtml = $sce.trustAsHtml

Then in HTML

<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="trustAsHtml(item)"></p>
        </div>
    </div>
</div>

回答2:

You can also use a filter if you don't want to do this for every controller.

myApp.filter('trustAsHtml',['$sce', function($sce) {
  return function(text) {
    return $sce.trustAsHtml(text);
  };
}]);

HTML

<p class="list-group-item" ng-repeat="item in recipe.ingredients" ng-bind-html="item | trustAsHtml"></p>