Tabs w/scroll position memory

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css" />

</head>

<body>
  <div ng-app="TabsApp">
    <div id="tabs" ng-controller="TabsCtrl">
      <ul>
        <li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)">{{tab.title}}</li>
      </ul>
      <div id="mainView">
        <div ng-include="currentTab.url"></div>
        {{currentTab.pos}}
      </div>
      <script type="text/ng-template" id="one.tpl.html">
        <div id="viewOne" scroll-position pos="currentTab.pos">
          <h1>View One</h1>
          <p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
          <p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
          <p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
          <p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
          <p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
          <p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
          <p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
          <p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
          <p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p>
        </div>
      </script>
      <script type="text/ng-template" id="two.tpl.html">
        <div id="viewTwo" scroll-position pos="currentTab.pos">
          <h1>View Two</h1>
          <p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu.</p>
        </div>
      </script>
      <script type="text/ng-template" id="three.tpl.html">
        <div id="viewThree" scroll-position pos="currentTab.pos">
          <h1>View Three</h1>
          <p>In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet
            arcu. Class aptent taciti sociosqu.</p>
        </div>
      </script>
    </div>
  </div>
</body>

</html>

(function() {
  'use strict';

  var app = angular.module('TabsApp', [])
    .controller('TabsCtrl', ['$scope', function($scope) {
      
      $scope.tabs = [{
        "title": 'One',
        "url": 'one.tpl.html',
        "pos": 0
      }, {
        "title": 'Two',
        "url": 'two.tpl.html',
        "pos": 0
      }, {
        "title": 'Three',
        "url": 'three.tpl.html',
        "pos": 0
      }];
      
      $scope.$watch('tabs', function(val) {
        console.log("Yay!!! It's working! Val=" + val[0].pos);
      }, true);
      

      $scope.currentTab = $scope.tabs[0];

      $scope.onClickTab = function(tab) {
        $scope.currentTab = tab;
      };

      $scope.isActiveTab = function(tabUrl) {
        return tabUrl == $scope.currentTab.url;
      };
    }]);
    
    app.directive("scrollPosition", function(){
      return {
          restrict: 'A',
          scope: {
              pos: "="
          },
          transclude: false,
          link: function(scope , element) {
            
             element[0].onscroll = function(){
              scope.pos=element[0].scrollTop;
              console.log(scope.pos);
              scope.$apply();
            };
            
            
            element[0].scrollTop = scope.pos;
          }
      };
  });
    
})();

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  float: left;
  border: 1px solid #000;
  border-bottom-width: 0;
  margin: 3px 3px 0px 3px;
  padding: 5px 5px 0px 5px;
  background-color: #CCC;
  color: #696969;
}

#mainView {
  border: 1px solid black;
  clear: both;
  padding: 0 1em;

}

#viewOne, #viewTwo, #viewThree {
  overflow: scroll;
  height: 200px;
}

.active {
  background-color: #FFF;
  color: #000;
}