title: AngularJS loading javascript in partials
body: <p>I have a partial in my AngularJS application that needs a 3rd party .js file to run. In order for this partial to work correctly, I have to have the javascript load after the page is loaded in the app view.</p>
  
  <p>What I have so far is this for the directive to include the scripts:</p>
  
  <pre><code>.directive('loadScripts',function() {
    return {
      restrict :'EA',
      link: function(scope, element, attrs) {
        angular.element('&lt;script src="/js/jquery.cycle.all.js" type="text/javascript"&gt;&lt;/script&gt;&lt;script src="/js/main.js" type="text/javascript"&gt;&lt;/script&gt;').append(element);
      }
    }
  })
  </code></pre>
  
  <p>Then on the partial I have <code>&lt;div load-scripts&gt;&lt;/div&gt;</code>. The partial doesn't get anything loaded, the directive isn't adding the html tags to the page. Any ideas on what I should do?</p>
  
  <p>I reviewed a similar question/answer here: <a href="https://stackoverflow.com/questions/16935095/correct-way-to-integrate-jquery-plugins-in-angular-js">Correct way to integrate Jquery plugins in Angular.js</a></p>
  
  <p>I appear to be following it exactly, except i'm using angular.element instead. I'm tried different tests and none of the element is being included into the DOM</p>