title: Angular directive bind to height of element
body: <p>I am fairly new to Angular and want to be able to bind to the height of an element.  In my current case I want to bind the CSS <code>bottom</code> on <code>el1</code> to the height of <code>el2</code>.  They do not share a common controller. How can I do this?</p>
  
  <pre><code>&lt;div id='el1' ng-controller='controller1' style='bottom: {{theHeightOfEl2}}'&gt;&lt;/div&gt;
  &lt;div id='el2' ng-controller='controller2' style='height: 573px;'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I found an answer on <a href="https://stackoverflow.com/a/16338806/94278">here</a> which looked promising but couldnt see how to extend it to allow me to specify which element I wanted to bind it to. </p>
  
  <p>In a generic case, I guess what I am asking for is a directive to bind property X on Element 1 to property Y on Element 2.</p>
  
  <p><strong>Update</strong></p>
  
  <p>I have created a directive to do this but it isn't quite working yet.  It fires correctly at the start but when I try to test it by manually updating the CSS of the <code>el2</code> the watch doesnt fire</p>
  
  <pre><code>m.directive('bindToHeight', function ($window) {
      return {
          restrict: 'A',
          link: function (scope, elem, attrs) {
              var attributes = scope.$eval(attrs['bindToHeight']);
              var targetElem = angular.element(document.querySelector(attributes[1]));
  
              // Watch for changes
              scope.$watch(function () {
                  return targetElem.height();
              },
              function (newValue, oldValue) {
                  if (newValue != oldValue) {
                      // Do something ...
                      console.log('Setting bottom to ' + newValue);
                      elem.attr('bottom', newValue);
                  }
              });
          }
      };
  });
  </code></pre>