AngularJS: When applying custom filter to data, i get an empty output

Question

I'm trying to apply a filter to some data that I'm pulling out of Firebase.

My HTML look like this:

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

Note: If I remove the "| ratings" it does work, and output the original text from firebase.

But once I apply this filter, I don't get any output, it's just empty. :( I'm totally new to both Angular, javascript and firebase. So any advice is very appreciated

'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";
        }
    }
})

Have any of you seen this before?

Answer 1

Maybe the output is not an int? Parse it. And use a default, its good practice.

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";
        }
    }
})