title: jQuery Plugins not working with Angular Router (Animsition)
body: <p>I'm trying to get the Animsition plugin working in an Angular project. 
  <strong>The loader is stuck and the view doesn't load.</strong></p>
  
  <p>The jQuery plugin is in a directive, and works as separate HTML files without Angular routing. But I want to get it to work WITH Angular Router.</p>
  
  <p>// In the directive, defaults were: </p>
  
  <pre><code>loadingParentElement : 'body',
  overlayParentElement : 'body',
  </code></pre>
  
  <p>(and it worked fine without router + separate full html files with head/body/script tags to sources. But as separate views, I changed each view to have parent main elements, assuming they acted as parent body elements. But still didn't work.</p>
  
  <p>app.js</p>
  
  <pre><code>var app = angular.module('MyApp', ['ngRoute']);
  
  app.config(function($routeProvider, $locationProvider) {
    $routeProvider
     .when('/', {
      templateUrl: 'partials/home.html',
      controller: 'AppCtrl',
    })
     .when('/work', {
      templateUrl: 'partials/work.html',
      controller: 'AppCtrl',
    })
    .otherwise({
      redirectTo: '/'
    });
  });
  
  // the directive 
  app.directive('ngAnimsition', [function() {
    return {
      restrict: 'A',
      scope: {
        'model': '='
      },
      link: function(scope, elem, attrs) {
        var $animsition = $(elem);
        $animsition.animsition({
          inClass: 'fade-in',
          outClass: 'fade-out',
          inDuration: 1500,
          outDuration: 800,
          linkElement: '.animsition-link',
          loading: true,
          loadingParentElement: 'main', //animsition wrapper element
          loadingClass: 'animsition-loading',
          loadingInner: '', // e.g '&lt;img src="loading.svg" /&gt;'
          timeout: false,
          timeoutCountdown: 5000,
          onLoadEvent: true,
          browser: [ 'animation-duration', '-webkit-animation-duration'],
          overlay : false,
          overlayClass : 'animsition-overlay-slide',
          overlayParentElement : 'main',
          transition: function(url) { 
            window.location.href = url;
          }
        });
      }
    }
  }]);
  </code></pre>
  
  <p>index.html file</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html class="no-js" ng-app="MyApp"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
          &lt;title&gt;Getting Animsition jQuery + Angular Router&lt;/title&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;!--CSS--&gt;
          &lt;link rel="stylesheet" href="css/normalize.min.css"&gt;
          &lt;link rel="stylesheet" href="js/animsition/animsition.min.css"&gt;
          &lt;link rel="stylesheet" href="css/main.css"&gt;
      &lt;/head&gt;
      &lt;body ng-controller="AppCtrl"&gt;
  
        &lt;!-- ng-router --&gt;
        &lt;div ng-view&gt;&lt;/div&gt;
  
        &lt;!-- tried below, but only does animsition on first load, not changing between views --&gt;
        &lt;!-- &lt;div ng-animsition class="animsition"&gt;
             &lt;!-- &lt;div ng-view&gt;&lt;/div&gt;
        &lt;!-- &lt;/div&gt;
  
        &lt;!-- jquery --&gt;
        &lt;script src="js/jquery/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/animsition/jquery.animsition.min.js"&gt;&lt;/script&gt;
  
        &lt;!-- Angular --&gt;
        &lt;script src="js/angular/angular.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/angular/angular-router.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/app.js"&gt;&lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Partial home.html</p>
  
  <pre><code>&lt;main&gt;
      &lt;div ng-animsition class="row container animsition"&gt;
          &lt;nav&gt;
              &lt;a ng-href="#/" class="active animsition-link"&gt;Home&lt;/a&gt;
              &lt;a ng-href="#/work" class="animsition-link"&gt;Work&lt;/a&gt;
          &lt;/nav&gt;
          &lt;div&gt;
              &lt;h1&gt;Home&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p>Partial work.html</p>
  
  <pre><code>&lt;main&gt;
      &lt;div ng-animsition class="row container animsition"&gt;
          &lt;nav&gt;
              &lt;a ng-href="#/" class="animsition-link"&gt;Home&lt;/a&gt;
              &lt;a ng-href="#/work" class="active animsition-link"&gt;Work&lt;/a&gt;
          &lt;/nav&gt;
          &lt;div&gt;
              &lt;h1&gt;Work&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/main&gt;
  </code></pre>