title: Why does ng-src not trigger certain property changes in AngularJS?
body: <p>I have a sample directive that watches for changes in the element, such as offsetWidth.</p>
  
  <p>If I apply the directive to an img element that loads the url via the src attribute, everything works fine.</p>
  
  <p>If I apply the directive to an img element that loads the url via the ng-src attribute, offsetWidth does not get updated.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="test"&gt;
  
    &lt;head&gt;
      &lt;script data-require="angular.js@1.2.0-rc2" data-semver="1.2.0-rc2" src="http://code.angularjs.org/1.2.0-rc.2/angular.js"&gt;&lt;/script&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;h1&gt;OffsetWidth: {{offsetwidth}} OffsetLeft: {{offsetleft}}&lt;/h1&gt;
      &lt;img testing ng-src="{{'http://scienceblogs.com/scientificactivist/wp-content/blogs.dir/392/files/2012/04/i-dcb85296b3695e8ce6d1ae4d660cea30-Smiley-face.gif'}}"&gt;&lt;/img&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>angular.module('test', []).
    directive('testing', function() {
      return function(scope, element, attr) {
        scope.$watch(
          'element.offsetWidth',
          function(newVal, oldVal) {
            scope.offsetwidth = element[0].offsetWidth
          }
        )
        scope.$watch(
          'element.offsetLeft',
          function(newVal, oldVal) {
            scope.offsetleft = element[0].offsetLeft
          }
        )
      }
    });
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/XTusNSFedqeeDMvBaHC6?p=info" rel="nofollow">Plunkr</a></p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I applied Buu Nguyen's solution below to ensure that the right changes were being watched, however there appears to be a timing issue.  When reloading the page multiple times, I am noticing that sometimes the value gets updated correctly and sometimes it does not.</p>
  
  <p>Updated javascript:</p>
  
  <pre><code>angular.module('test', []).
    directive('testing', function() {
      return function(scope, element, attr) {
        scope.$watch(
          function() {
            return element[0].offsetWidth
          },
          function(newVal, oldVal) {
            scope.offsetwidth = element[0].offsetWidth
          }
        )
        scope.$watch(
          function() {
            return element[0].offsetLeft
          },
          function(newVal, oldVal) {
            scope.offsetleft = element[0].offsetLeft
          }
        )
      }
    });
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/qGLDZSM0w8Fpz7Rw8G7E" rel="nofollow">Updated Plunkr</a></p>