title: Selecting the first child image tag using angular directive and jqLite
body: <p>I have a directive that I loop through called <code>waPages</code>.</p>
  
  <p>Inside this tag are a few child nodes; one of which, is an image tag.</p>
  
  <p><strong>TEMPLATE:</strong></p>
  
  <pre><code>&lt;li wa-pages page="page" ng-repeat="page in carousel.pages"&gt;&lt;/li&gt;
  </code></pre>
  
  <p><strong>inner template:</strong></p>
  
  <pre><code>&lt;div id="page-{{page.pageindex}}"&gt;
    &lt;img  ng-src="{{page.imageurl}}" on-load /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2><strong>Question:</strong></h2>
  
  <p><strong>How can I select this image tag and get the inner width/height</strong></p>
  
  <p><strong>Pages Directive:</strong></p>
  
  <pre><code>angular.module('carouselApp')
  .directive('waPages',  function (Pages, Carousel) {
      return {
          scope: {
              page: "="
          },
          templateUrl: 'views/wa.pages.html',
          transclude: true,
          require: '^waCarousel',
          link: function (scope, el, attrs, ctrl) {
              //this wont work obviously
              var imageWidth = el[0].find('img:first-child').innerWidth;
          }
      }
  
  });
  </code></pre>
  
  <p>Update hers my <code>console.log(el[0]);</code></p>
  
  <p><img src="https://i.stack.imgur.com/4QWiZ.png" alt="enter image description here"></p>