angularjs 1.5 - print hex html special char in brackets

Question

I'm new with angular, I started nearly a week ago, but there are some features I don't quite understand yet... so be kind. I wanted to bind in a ng-repeat some HEX codes (from icomoon for example), but suddenly the "fantastic" angular failed:

var app = angular.module("foooooods");

app.controller("foodController",['$scope','$http','$log',function($scope,$http,$log){

    $scope.meals = [
        {name:'colazione', id:1, font:""},
        {name:'brunch', id:2, font:""},
        {name:'pranzo', id:3, font:""},
        {name:'snack', id:4, font:""},
        {name:'cena', id:5, font:""},
        {name:'dopo-cena', id:6, font:""}
    ];
...

now the html:

<div class="pasto" ng-repeat="(idmeal, meal) in meals">
    <label title="{{meal.name}}" class="af-font">
        {{meal.font}}
        <input type="radio" value="1"
            ng-model="fCtrl.tab"
            ng-change="fCtrl.openNewMeal(idmeal)">
    </label>
    <p>{{meal.name}}</p>
</div>

what happened? <div class="pasto"> was de facto repeated, but {{meal.font}} was printed as plain text.

then I come up with a filter:

app.filter('trust', ['$sce',function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
}]);

but now I need to create an additional html element using the ng-bind-html, which I don't want... (if i don't use another element child in the <label> I loose its content) since the solution inline {{meal.font | trust}} inexplicably doesn't works.

<label title="{{meal.name}}">
    <span class="af-font" ng-bind-html="meal.font | trust"></span>
    <input type="radio" value="1"
        ng-model="fCtrl.tab"
        ng-change="fCtrl.openNewMeal(idmeal)">
</label>

help will be appreciated! THANKS. NB - ng-bind-html-unsafe is deprecated.

Answer 1

I found out somewhere that unicode character are the solution. istead of an html entity write the unicode char:

//not working
{name:'colazione', id:1, font:""}
//perfectly working
{name:'colazione', id:1, font:"\ue900;"}

the secret is &#x<charcode> -> \u<charcode>. Maybe it will be helpfull for anyone looing for this simple achivement! bye