How to handle name with slash as one path param in url

Question

I have a route in app.js like

.when('/provider/:id/app/:aName', {                            
        templateUrl: 'templates/provider/form.html',
        controller: 'YourController'
    });

in html:

<a class="btn btn-warning" ng-href="#/provider/{{id}}/app/{{appName}}">Edit</a>

However my appName will contain slashes, such as abc/test so with inputs id = 1 and appName = abc/test, href will become

<a class="btn btn-warning" ng-href="#/provider/1/app/abc/test">Edit</a>

This is causing a problem, because my code presumes that the slash in the application name represents a different section of the website, the above href fails. So the URL will fail.

How to manage the app name with slash in url that is abc/test. Any help on this will be really helpful.

I have looked into this post stackoverflow, but unable to implement the same in my code. If I replace / with %2F then the app name changes. How to encode URL without affecting the actual app name