AngularJS Фильтр с encodeURIComponent не работает в ссылке

Question

Я пытаюсь закодировать значение, переданное в URL, используя фильтр, который вызывает encodeURIComponent.

Мой оригинальный фильтр

angular.
    module('machineorderDetail').
    filter('encodeURIComponent', function () {
        return window.encodeURIComponent;
    }).

основан на этом посте

Как я могу вызвать encodeURIComponent из шаблона angularJS?

Когда это не сработало, я попробовал некоторые другие предложения и вставил $ window, обернул его в другую функцию и изменил href на ng-href.И исходная версия, и эта новая версия возвращают один и тот же вывод.

angular.
    module('machineorderDetail').
    filter('encodeURIComponent', ['$window', function ($window) {
        return function (input) {
            return encodeURIComponent(input);
        };
    }]).

Если я это сделаю, то смогу увидеть закодированное значение, как и ожидалось, в консоли.

angular.
    module('machineorderDetail').
    filter('encodeURIComponent', ['$window', function ($window) {
        return function (input) {
            var retVal = encodeURIComponent(input);
            console.log(retVal);
            return retVal;
        };
  }]).

консольный вывод

Я могу связать это так, что результат - закодированное значение.

<div>{{MachineOrderFile.DocumentName | encodeURIComponent}}</div>

Однако, когда я вставляю href или ng-href, значение не кодируется.

<a ng-href="#!/machineorders/fileupload/{{fileProfile.DocumentName | encodeURIComponent}}/{{$ctrl.machineorder.MachineOrderHeader.ID}}">

Значение "Japan / Singapore PO" должно быть Japan% 2FSafapore% 20PO, но оно

снимок экрана URL

Любая помощь или предложения будут с благодарностью.

---

Для MikeS, показывающего закодированный URL при наведении курсора на jsfiddle снимок экрана jsfiddle