Here is what I came up with. When moving back from the detailed view to the list view, pass the identifier of the object that was shown. Then scroll that item in the list back to the view.
http://plnkr.co/edit/tWv4UNbBdSbes3XKEcYw?p=preview
HTML:
<!DOCTYPE html> <html data-ng-app="myApp"> <head> <title>ui router test</title> <link rel="stylesheet" href="style.css"> </head> <body> <div ui-view class="main-view"></div> <script id="templates/start.html" type="text/ng-template"> <p>Return to {{value}}</p> <div class="start"> <div ng-repeat="i in getNumber(30) track by $index" class="box" id="item_{{$index}}" ui-sref="detail({id:$index})"> {{$index}} </div> </div> </script> <script id="templates/detail.html" type="text/ng-template"> <div class="detail"> Page: {{id}} <br><br> <button ui-sref="start({id:id})">Start by sref</button> <button ng-click="goBack()">Back by history</button> <a href="#/?id={{id}}">Link</a> </div> </script> <script type="text/javascript" src="http://code.angularjs.org/1.3.14/angular.js"></script> <script type="text/javascript" src="http://code.angularjs.org/1.2.14/angular-animate.js"></script> <script type="text/javascript" src="http://code.angularjs.org/1.2.14/angular-touch.js"></script> <script type="text/javascript" src="https://cdn.cdnhttps.com/cdn-libraries/angular-ui-router/0.2.13/angular-ui-router.min.js"></script> <script type="text/javascript" src="ui-router-extras.js"></script> <script type="text/javascript" src="app.js"></script> </body> </html>
JS:
var app = angular.module('myApp', ['ngAnimate', 'ui.router', 'ct.ui.router.extras.dsr']); app.config(function ($stateProvider,$urlRouterProvider) { $urlRouterProvider.otherwise("/"); $stateProvider .state('start', { url: "/?id", templateUrl: "templates/start.html", controller: 'StartCtrl', deepStateRedirect: true }) .state('detail', { url: "/detail/:id", templateUrl: "templates/detail.html", controller: 'DetailCtrl', deepStateRedirect: true }) }); app.controller('StartCtrl', function($scope, $stateParams, $location, $anchorScroll) { $scope.getNumber = function(num) { return new Array(num); } $scope.value = $stateParams.id; if($scope.value) { $location.hash("item_" + $scope.value); $anchorScroll(); } }); app.controller('DetailCtrl', function($scope, $stateParams) { $scope.id = $stateParams.id; $scope.goBack = function() { window.history.back(); }; });