Pass data with a slash in it in AngularJS -

when clicking on link, can pass data page:

<div ng-repeat="app in apps | filter:{name: searchtext}" class="slide">     <a href="#/app/{{app.name}}">{{app.name}} {{app.version}}</a> </div> 

when new page comes up, see app's name:

this markup display name:

<p>{{appname}}</p> 

however, if want pass id, this:

<div ng-repeat="app in apps | filter:{name: searchtext}" class="slide">     <a href="#/app/{{app.id}}">{{app.name}} {{app.version}}</a> </div> 

that doesn't work. when click on id, nothing happens in browser. there no error in f12 tools console window. , fiddler shows no activity. think it's because id has slash in (this ravendb convention). see when hover on link:

notice last slash. think that's messing things up.

so tried stackoverflow solution escape slash. when hover, see this:

i thought have done it, i'm same behavior: nothing happens when click on it. nothing in fiddler either. missing? (if change markup pass name property again, things work. wiring good.)

edit

i realized it's not nothing happening. route provider kicking in , taking me same page i'm on:

$routeprovider.otherwise({ redirectto: '/apps' }); 

and entire routing config:

app.config(['$routeprovider', function($routeprovider) {     $routeprovider.when('/apps', { templateurl: 'partials/apps.html', controller: 'appscontroller' });     $routeprovider.when('/servers', { templateurl: 'partials/servers.html', controller: 'serverscontroller' });     $routeprovider.when('/app/:appid?', { templateurl: 'partials/app.html', controller: 'appcontroller' });     $routeprovider.otherwise({ redirectto: '/apps' }); }]); 

workaround

setting route allows me hit right page. issue need prefix number part of id (on receiving page) literal "applications/". guess can that.

$routeprovider.when('/app/applications/:appid?', { templateurl: 'partials/app.html', controller: 'appcontroller' }); 

for completeness, had in receiving controller:

.controller('appcontroller', function ($scope, $routeparams) {        $scope.appid = "applications/" + $routeparams.appid; }) 

this fiddle reproduces problem. small application has 2 routes: /apps , /app/:appid. if /app/:appid route taken, page displays hello, {{appid}}, otherwise displays hello, apps. in startup method (run), i've added hard-coded redirect '/app/applications%2f1121' using $location.path. can see, changing route using $location.path('/app/applications%2f1121') works well: application starts , gives right id: hello, applications/1121. however, changing route using href doesn't work: if click link, app displays hello, apps, meaning /apps route taken after /app/applications%2f1122 url found in link not recognized.

therefore, workaround use $location.path change routes. put function in $routescope , use ng-click call (fiddle).

.run(function ($rootscope, $location) {     $rootscope.go = $location.path.bind($location); })  <a ng-click="go('/app/applications%2f1122')" href=""> 

escaping slash still required, workaround not require change route configuration, can handle id.