Angular JS:Ao aplicar filtro personalizado aos dados, recebo uma saída vazia

Question

Estou tentando aplicar um filtro a alguns dados que estou extraindo do Firebase.

Meu HTML está assim:

<span ng-bind-html="game.rating | ratings"></span>

Observação:Se eu remover o "| ratings" funciona e gera o texto original do Firebase.

Mas depois de aplicar esse filtro, não obtenho nenhuma saída, ele fica vazio.:( Eu sou totalmente novo no Angular, JavaScript e FireBase.Então qualquer conselho é muito apreciado

'use strict';
MyApp.filter('ratings', function() {
    return function(rating) {
        switch(rating) {
            case 1:
                return "1star";
            case 2:
                return "2stars";
            case 3:
                return "3stars";
            case 4:
                return "4stars";
        }
    }
})

Algum de vocês já viu isso antes?

Answer 1

Talvez a saída não seja um int?Analise-o.E use um padrão, é uma boa prática.

MyApp.filter('ratings', function() {
    return function(rating) {
        switch(parseInt(rating)) {
            case 1:
                return "1star";
            case 2:
                return "2stars";
            case 3:
                return "3stars";
            case 4:
                return "4stars";
            default: 
                return "Not set";
        }
    }
})