title: AngularJS $watch for element width change
body: <p>I've been scouring the internet for the past 3 days trying to work out how to get a directive to run when angular notices a change in the width of a div.
  I keep seeing the same examples of how I'm supposed to achieve this but, they don't work for me and I don't know why.</p>
  
  <p>I'm back at square one. All I am trying to do is: update a css property of a div (that has a directive as an attribute), when the div's width changes.</p>
  
  <p>I need to know how to get angular to check when the property has changed.</p>
  
  <p>This is what I have so far:</p>
  
  <pre><code>.directive('stayPut', function () {
      var linker = function (scope, element, attrs) {
  
          scope.getElemWidth = function () {
              return element.width();
          };
  
          scope.$watch(scope.getElemWidth, 
              function (newWidth, oldWidth) {
                  var deltaWidth = newWidth - oldWidth;
  
                  console.log(deltaWidth);
  
                  element.css('top', 
                      (parseInt(element.css('top')) + 
                      deltaWidth)                   +
                      'px');
          }, true);
  
          element.bind('resize', function () {
              scope.$apply();
          });
      };
  
      return {
          link: linker,
          restrict: 'A'
      }
  });
  </code></pre>
  
  <p>I know the issue here is:</p>
  
  <pre><code>element.bind('resize', function () {
      scope.$apply();
  });
  </code></pre>
  
  <p>I have a vague understanding of how it works, but I don't understand why it doesn't work here.</p>