How to hide stateProvider url displayed in Address bar using Angular JS?

The personId is displayed in the url, because its defined as URL parameter.

But we can avoid that, by defining it with params notation:

.state("peopleDetail", {
    url : "/",
    params : { personId : null },
    ...
}

Check the doc:

$stateProvider

A map which optionally configures parameters declared in the url, or defines additional non-url parameters. For each parameter being configured, add a configuration object keyed to the name of the parameter.

...
Each parameter configuration object may contain the following properties:

• value
• array
• squash -- (see more in that resource)

For similar stuff and some more details, please check:

Angular ui router passing data between states without URL