Interaction problem: solution 2

var app = angular.module('plunker', ['ngSanitize']);

app.controller('MainCtrl', function($scope, $location, $anchorScroll) {
  $scope.pointers = [1, 2, 3, 4, 5, 6];
  $scope.goToParagraph = function(hash) {
    $location.hash(hash);
    $anchorScroll();
  }
  $scope.changeTitle = function() {
    var lineCount = Math.floor(Math.random() * 10);
    $scope.titleString = Array(lineCount + 1).join('<br/>');
  }
})
  .directive('header', function($rootScope) {
    return {
      link: function(scope, element, attrs) {
        scope.$on('changeHeight', function() {
          var height = Math.floor(Math.random() * 100) + 50;
          element.css({
            height: height + 'px'
          });
          $rootScope.$broadcast('newHeight', height);
        });
      },
      restrict: 'C'
    }
  })
  .directive('pointer', function() {
    return {
      link: function(scope, element, attrs) {
        scope.$on('newHeight', function(e, value) {
          if (value) {
            element.css({'top': -value + 'px'});
          }
        });
      },
      restrict: 'C'
    }
  })

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular-sanitize.js" data-semver="1.2.25"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller='MainCtrl'>
    <div class='header'>
        <ul>
          <li ng-repeat="item in pointers" ng-click="goToParagraph(item)">Go to {{item}}
            <span ng-hide="$last"> | </span>
          </li>
          <li class='change-height' 
            ng-click='$emit("changeHeight")'>Change height</li>
        </ul>
    </div>
    <br/><br/><br/><br/><br/>
    <ul>
        <li ng-repeat="item in pointers">
          <a class='pointer' name="{{item}}"></a>
          <span>{{item}}</span>
          ...<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
          <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        </li>
    </ul>
</body>

</html>

/* Put your css in here */

.header {
  position: fixed;
  background-color: green;
  width: 100%;
  color: #fff;
}
.pointer{
  position: relative;
  display: block;
  top: -50px;
}
.change-height {
  float: right;
}
.header li{
  display: inline-block;
  cursor: pointer;
}
body {
  margin: 0;
}