Tab Navigation Demo - With Services Perserving Scope

// 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>