Angular JS 'route' doesn't match component with / (encoded '/')

Question

I have a \'route\' in Angular JS as follows

$routeProvider.when(\'/foos/:fooId\', { controller: FooController, templateUrl: \'foo.html\'});

Answer 1

Based on the answer of Langdon, I created a filter which encodes everything twice, and another one which decodes:

.filter('escape', function() {
        return function(input) {
            return encodeURIComponent(encodeURIComponent(input));
        }; 
})

.filter('unescape', function() {
        return function(input) {
            return decodeURIComponent(input);
        };
    });

I use this in my product links as follows:

On the product page, I decode the product name:

{{product.name | unescape}}