ngRoute with auto scroll position in view

When toggling multiple views, the view will remember the scroll position of the view in a directive.

by empie

HTML

<script src="http://code.angularjs.org/1.2.1/angular-route.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<div ng-app="myapp" data-auto-scroll>
    <div class='float-right'>
        <div class='fixed'> <a href="#/friends-list">Friends List</a> | <a href="#/friends-table">Friends Table</a>
            <p>
                Remembers the scrollposition of a view. Change the scrollposition of this window, then click a 'Friends Table' to navigate to the table view. Click on 'Friends List' and the view will auto scroll to the previous position.</p>
        </div>        
    </div>
    <div ng-view></div>
</div>

CSS

p {
    background : #4679BD;
    color : #FFF;
    padding : 5px;
}
.fixed {
    position: fixed;
}
.float-right {
    float:right;
    width: 250px;
}
li { padding: 10px; }
table, th, td {
   border: 1px solid brown;
    padding: 10px;
}

JavaScript

angular.module('myapp', ['ngRoute'])
    .config(function ($routeProvider) {
    $routeProvider.when('/friends-list', {
        template: '<div><ul><li ng-repeat="friend in friends">{{friend.name}} - {{friend.gender}} - {{friend.age}}</li></ul></div>',
        controller: 'friendsListController'
    })
        .when('/friends-table', {
        template: '<table><tbody><tr><th>Name</th><th>Gender</th><th>Age</th></tr><tr ng-repeat="friend in friends"><td>{{ friend.name }}</td><td>{{ friend.gender }}</td><td>{{ friend.age }}</td></tr></tbody></table>',
        controller: 'friendsListController'
    }).otherwise({
        redirectTo: '/friends-list'
    });
})
    .directive('autoScroll', function ($document, $timeout, $location) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.okSaveScroll = true;

            scope.scrollPos = {};

            $document.bind('scroll', function () {
                if (scope.okSaveScroll) {
                    scope.scrollPos[$location.path()] = $(window).scrollTop();
                }
            });

            scope.scrollClear = function (path) {
                scope.scrollPos[path] = 0;
            };

            scope.$on('$locationChangeSuccess', function (route) {
                $timeout(function () {
                    $(window).scrollTop(scope.scrollPos[$location.path()] ? scope.scrollPos[$location.path()] : 0);
                    scope.okSaveScroll = true;
                }, 0);
            });

            scope.$on('$locationChangeStart', function (event) {
                scope.okSaveScroll = false;
            });
        }
    };
})
    .controller('friendsListController', function ($scope) {
    $scope.friends = [{
        name: 'John',
        age: 25,
        gender: 'boy'
    }, {
        name: 'Jessie',
        age: 30,
        gender: 'girl'
    }, {
        name: 'Johanna',
        age: 28,
        gender: 'girl'
    }, {
        name: 'Joy',
    ...