title: Best way to work with angularJS and jquery's $('document').ready()
body: <p>I have a bunch of pages given to me by a designer that has to be integrated with my existing project in AngularJS.</p>
  
  <p>The page that I have been given uses a lot of jquery . The one thing that is causing problems is the jquery's <code>$('document').ready()</code> function.</p>
  
  <p>Since in an angular project the page is just loaded once, most of the <code>document.ready()</code> parts in any of the pages are not working. Every time a page changes, there is some code to inside this function that doesn't work.</p>
  
  <p>So whichever controller in my project is supposed to have any code that work's on <code>document.ready</code> I am throwing it in the controller like this :</p>
  
  <pre><code>setTimeout(function(){
  $scope.$apply(function() {
     var _wht=($(window).height());
     var _wwt=($(window).width());
     _wht=($(window).height());
     _wwt=($(window).width());
     if(_wht &gt; 450){
         var mcht = _wht - ($('header').height()+ $('footer').height()+50);
         $('.login-page').css('height',mcht+'px');
         $('.login-page').css('padding-top',((mcht - 158)/2) +'px');
  
      }
  
  
  
     });
   });
  </code></pre>
  
  <p>This works very well.</p>
  
  <p>But I think this counters angularJS' philosophy of separation of concerns . The controller is where you have only your business logic. </p>
  
  <p>Where is the best place to throw this piece of code ?</p>