title: AngularJS $watch a div element property
body: <p>I need to react on a div property change (<code>element.getBoundingClientRect().left</code>), so I'm <code>$scope.$watch()</code>'ing it. This element is wrapped by a scrollable holder. </p>
  
  <p>It kinda works, but the watcher only triggers as long as the holder is not scrollable. I can tell the clientRect is updated by checking the element prop manually.</p>
  
  <p>An example can be seen <a href="https://codepen.io/Darksoulsong/pen/yXYJpZ?editors=0010" rel="nofollow noreferrer">here</a>. Keep adding boxes until the scroll shows up. Note that <code>box1ClientRectLeft</code> ceases to update. Click the refresh button and you'll see that the value changes as expected. Remove the boxes until the scroll disappears and se the watcher working again. How can I fix this?</p>
  
  <p><strong>Note: it must be done without the use of DOM events like on scroll and so on.</strong></p>
  
  <p>The code:</p>
  
  <pre><code>angular.module('test', [])
  .controller('boxesController', controller);
  
  function controller ($scope) {  
    $scope.boxes = [
      { name: 1 }
    ];
  
    $scope.add = function () {
      $scope.boxes.push({name: $scope.boxes.length + 1});
    };
  
    $scope.remove = function () {
      $scope.boxes.pop();
    };
  
    $scope.refreshClientRect = function () {
      $scope.box1ClientRectLeft = document.querySelectorAll('#box-1')[0].getBoundingClientRect().left;
    }
  
    $scope.$watch(() =&gt; document.querySelectorAll('#box-1')[0].getBoundingClientRect().left, (val) =&gt; {
      $scope.box1ClientRectLeft = val;
    });
  
  }
  </code></pre>