title: What is the Best way to load jQuery custom JS file in AngularJs
body: <p>Basically I had a static page using many jQuery dom manipulation for creating UI and initiating few plugins. But now Im moving with AngularJs.</p>
  
  <p>orignally I had main.js</p>
  
  <pre><code>  (function($){
      var somedom = $('#someid');
  somedom.callingManyJquery() plugins
  
  ...some other jquery dom code
    })(jQuery);
  </code></pre>
  
  <p>And now I have my controller, which takes care of rendering HTML content main.html into index.html. But I want to load the above main.js into a Directive or as a service so DOM manipulations should happen only after controller loads then HTML and jQuery will be able to find my HTML tags to catch the DOM.</p>
  
  <p>inside index.html I have</p>
  
  <pre><code>&lt;div ng-view&gt;&lt;/div&gt;
  </code></pre>
  
  <p>in app.js I have routes and config.</p>
  
  <pre><code>.when('/', {
          templateUrl: 'views/main.html',
          controller: 'MainController'
        })
  </code></pre>
  
  <p>What should be the best way to load my jQuery files into my AngularJs controllers.</p>