title: jQuery Plugins Doesn't Work Well with Angularjs
body: <p>i have used <strong>jQuery slider</strong> in my project in which i am loading images using angular. My current view looks like this;</p>
  
  <pre><code>        &lt;div id="slides"&gt;
              &lt;div class="slides_container"&gt;
                  &lt;a href="" data-ng-repeat="image in gallery"&gt;
                      &lt;img data-ng-src="{{image.imageUrl}}" width="919" height="326" alt="" /&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>the controller;</p>
  
  <pre><code>blogApp.controller("HomeController", ['$scope', '$resource', function ($scope, $resource) {
      var basePath = '/api/',
          FrontGallery = $resource(basePath + 'gallery?culture=en-US'),
  
      $scope.gallery = FrontGallery.query();
  }]);
  </code></pre>
  
  <p>And the jQuery slider code (to make it a slider. I'm using this plugin <a href="http://archive.slidesjs.com/">http://archive.slidesjs.com/</a>)</p>
  
  <pre><code>$(document).ready(function () {
      $('#slides').slides({
          preload: true,
          preloadImage: '/content/images/theme/loading.gif',
          play: 5000,
          pause: 2500,
          hoverPause: true
      });
  });
  </code></pre>
  
  <p>When, i try this code, my all images are loaded from database (debugged it through firebug) <strong>but jQuery slider isn't applying the animation or sliding effect to it</strong> <br />
  And when i remove the <code>data-ng-repeat="image in gallery</code> and use Some static content i.e images, i get the sliding effect back.<br />
  What's the problem here. I think Angular is manipulating some how my DOM. That's why i'm getting this problem whenever i put i.e use some angular attributes on my slider.
  <br />
  <strong>Note:</strong> i have the same issue with jQuery news i.e jQuery <code>InnerFade</code> plugin <a href="http://medienfreunde.com/lab/innerfade/">http://medienfreunde.com/lab/innerfade/</a> <br />
  Here is how the <code>innerFade</code> is used;</p>
  
  <pre><code>&lt;h1&gt;
      &lt;img src="/content/images/theme/hotnews.png" alt="" /&gt;Hot News&lt;/h1&gt;
  &lt;ul id="news"&gt;
      &lt;li class="ng-repeat:headline in news"&gt;
          &lt;span class="ng-bind:headline.description"&gt;&lt;/span&gt;
          &lt;a href="#" title="Read More"&gt;» more&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and the controller;</p>
  
  <pre><code>var HotNews = $resource(basePath + 'article/hotnews?culture=en-US');
  $scope.news = HotNews.query();
  </code></pre>
  
  <p><strong>How do i fix these problems?</strong><br />
  <strong>Update 2:</strong>
  Here is my routes;</p>
  
  <pre><code>// declare a module
  var blogApp = angular
      .module('blogApp', ['ngResource', 'ngSanitize'])
      .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
          //$locationProvider.html5Mode(true);
          //configure the routes
          $routeProvider
              .when('/', {
                  // list the home page
                  templateUrl: "tmpl/home.html",
                  controller: "HomeController"
              })
              .when('/article/:id', {
                  // access custom param
                  foo: "hello world",
                  // list the home page
                  templateUrl: "tmpl/article.html",
                  controller: "ArticleController"
              })
              .when('/404', {
                  template: '&lt;h1&gt;404 Not Found!&lt;/h1&gt;'
              })
              .otherwise({ redirectTo: '/404' });
      }]);
  </code></pre>
  
  <p><strong>Solution #1:</strong>
  Temporary, (As <strong>@Jason Goemaat</strong> answered) works for me. So, here is what i have done. I didn't create any <code>directive</code> but straightly i injected the <code>$timeout</code> to my controller and then i did the following;</p>
  
  <pre><code>$timeout(function () {
      jQuery('#news').innerfade({
          animationtype: 'slide',
          speed: 750,
          timeout: 2000,
          type: 'random',
          containerheight: '1em'
      });
      jQuery('#slides').slides({
          preload: true,
          preloadImage: 'image/theme/loading.gif',
          play: 5000,
          pause: 2500,
          hoverPause: true
      });
  
  }, 100);
  </code></pre>
  
  <p>And it did work for both i.e for <code>Slider</code> and for <code>InnerFade</code></p>