master-detail with url that can be bookmarked

  1. I have a page whose left side displays a list of items.
  2. On clicking one of the items, the details of the item should open in the right pane.

  3. Also the url should be set to "/item/21"

    • The problem with $route is that it causes a complete refresh.
    • The problem with just capturing the ng-click and setting the item, is that the url wont change and hence cant be bookmarked.

The angularjs site implements something similar for their api and tutorial search sections.

What are my options for implementing the above ?

By "complete refresh" I'll assume that means the entire page is getting refreshed. One way to work around this is to put the left pane contents directly into your index.html page, and only use ng-view to control the right pane:

<div ng-controller="...">
  <!-- left pane stuff here -->
</div>
<ng-view><!-- right pane stuff will show up here --></ng-view>

See also http://stackoverflow.com/a/12184150/215945 and
http://stackoverflow.com/a/14365786/215945