$http requests and angular routing based on primary key or url param?

I have a relational database from which I retrieve data through a web service. The @GET methods that I defined are based on primary keys. For example, for a team having a primary key 1, I use a @GET request http://localhost:8080://teams/1 to get the data related to the team:

{
 “id” : “1”,
 “name” : “Barcelona"
}

While I am implementing my web app, I faced a conceptual issue. Since I don’t think it is a good practice to let an end user see the primary key id, I kept the requests based on primary key, but, I added an attribute called uri to my database table (for Barcelona uri is bar, and so on). I am using the uri attribute as a parameter in the url. So if a user clicks on Barcelona team image, he will get the url: http://localhost:9000/teams/bar instead of http://localhost:9000/teams/1 while in the internal implementation of the state, I am using the request http://localhost:8080://teams/1 that I already defined in my web service, because at the moment I used a request to get the image of Barcelona, I got the id also that I can pass as parameter to the new request: http://localhost:9000/teams/1

Everything is working fine, but the problem is that if a user enters the url: http://localhost:9000/teams/bar directly in the browser instead of clicking on the Barcelona image, the request won’t be able to work, since the id is not present.

What I want to know is, what is the best practice in this situation?

1. Keeping the behavior as it is?
2. Making requests from database based on uri attribute instead of the primary key? If yes, why do I use primary key? Why not considering the uri attribute as a primary key?
3. What do you suggest?