// Declare app level module which depends on filters, and services
var app=angular.module('plunker', [
'ngRoute'
]).config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.when('/tab1', {
templateUrl: 'tab1.html',
controller: 'MainCtrl'
})
.when('/tab2', {
templateUrl: 'tab2.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/tab1'
});
$locationProvider.html5Mode(true);
}
]);
app.controller('NavCtrl', function($scope, $location) {
$scope.isActive = function(route) {
$scope.path = $location.path();
return $location.path() === route;
};
});
app.controller('MainCtrl', function($scope) {
$scope.range = function(a, b) {
var coll = [];
for (var i = a; i <= b; i++) {
coll.push(i);
}
return coll;
}
});
app.factory('rememberService', function() {
return {
scrollTop: undefined
};
});
app.directive('scroller', function($timeout, rememberService) {
return {
restrict: 'A',
scope: {},
link: function(scope, elm, attrs) {
var raw = elm[0];
elm.bind('scroll', function() {
rememberService.scrollTop = raw.scrollTop;
});
$timeout(function() {
raw.scrollTop = rememberService.scrollTop;
});
}
};
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.2.7" src="http://code.angularjs.org/1.2.7/angular.js" data-require="angular.js@1.2.x"></script>
<script src="http://code.angularjs.org/1.2.7/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="plunker">
<div ng-controller="NavCtrl">
<p>Click one of the following choices.</p>
<ul>
<li ng-class="{active: isActive('/tab1')}"><a href="#/tab1">tab 1</a>
</li>
<li ng-class="{active: isActive('/tab2')}"><a href="#/tab2">tab 2</a>
</li>
</ul>
<pre>{{ path }}</pre>
</div>
<div ng-view></div>
</body>
</html>
/* Put your css in here */
.active {
background: gray;
color: white;
}
.scroll-thru-me {
width: 400px;
height: 500px;
overflow-y: scroll;
}
<h1> Hi, this is tab1 </h1>
<div class="scroll-thru-me" scroller>
<ol>
<li ng-repeat="i in range(0, 100)">Item</li>
</ol>
</div>