Is there a way of using routes in angular to automatically scroll to data within ng-repeat

I want to be able to use routes like an anchor tag.

For example, say I had a category page with a list of products.

I wish to set the route ....../category/shoes to go to the top of the page,

And ....../category/shoes/air-max to scroll to the shoe on the same page that is dynamically loaded within a ng-repeat block.

Essentially, the page should emulate the behavior of a static page where:

  • /shoes.html will go to the top of the page
  • /shoes.html/#air-max will go to the anchor

the difference being that it is an angular app and the data is dynamically loaded.

You may use $index inside your ng-repeat directive, so that each item as a unique index.

<ul ng-repeat="item in array">
  <li id="{{$index}}><li>
</ul>