title: AngularJS - Manipulating the DOM after ng-repeat is finished
body: <p>I'm experiencing some problems regarding manipulation of the DOM after looping through the data.</p>
  
  <p>We have a jQuery slider plugin that is tied to data and works normally, but when using <code>ng-repeat</code>, we have to wrap its initialization with <code>$timeout</code> for it to work &mdash; and now that isn't even working.</p>
  
  <p>I think using <code>$timeout</code> is unreliable, which makes for a bad fix. In jQuery I could use <code>$(document).ready()</code> &mdash; which was solid, but using <code>angular.element(document).ready()</code> doesn't seem to work either. </p>
  
  <p>The slider directive is invoked but cannot obtain the height of the images in the slider because the images have not been loaded into the DOM &mdash; resulting in the slider having a calculated height of 0.</p>
  
  <p>I'm finding it very frustrating at the moment - there must be a way to manipulate the DOM after data (in an <code>ng-repeat</code> for example) has cycled through. </p>
  
  <p>The Initialization of the slider is performed as follows:</p>
  
  <pre class="lang-js prettyprint-override"><code>var sliderLoad = function () {
      $timeout(function () {
          var setHeight = elem.find('.slide:eq(0)').outerHeight(true);
          elem.css({
              height: setHeight
          });
      }, 1000);
      // Show the slider nav buttons
      elem.parent().find('.direction-nav').show();
  };
  </code></pre>
  
  <p>&hellip; and here is a <strong><a href="http://plnkr.co/edit/S7Nv0Bb4T3ahUwD2JTC0?p=preview">reproduction demo</a></strong>.</p>