javascript - カスタムフィルターを使用すると ng-bind が失敗する

Question

私は多くの回答を調べましたが、コードが機能しない理由を一生理解できません!

コントローラーから渡された変数に単純なカスタム フィルターを適用したいと考えています。room-price値は問題なく表示されます。ただし、price-per-nightフィルターを追加すると値が消えます。

誰でも解決策を提案できますか? ありがとう

テンプレート

<div class="h3 left-align p1" ng-bind="room.price | price-per-night"></div>

コントローラ

routerApp.controller('MyController', function($scope) {
    $scope.rooms = [
    {
        name: 'Basic',
        price: 50
    }]
});

フィルター

routerApp.filter("price-per-night",
    function() {
        return function(price) {
            var output = '£' + price + ' ' + 'per night';
            return output;
        };
    }
);