title: Combination of $(document).ready and $scope.$on('$viewContentLoaded', function() {...})
body: <p>I'm using <code>JQuery UI</code> components in a <code>view</code> of <code>AngularJS</code>/<code>JQuery</code> application. </p>
  
  <p>I need something like this (does not work) in my <code>JavaScript</code> code:</p>
  
  <pre><code>$(document).ready(function () {
  
      var elem = $('div[ng-view]')[0];
      var $scope = angular.element(elem).scope();
  
      $scope.$on('$viewContentLoaded', function() {
  
            // multiple JQuery statements
            // to support JQuery-UI componenets
  
      });
  });  
  </code></pre>
  
  <p>This code is included as <code>&lt;script&gt;</code> into <strong>index.html</strong> that has <code>&lt;div class="container" ng-view&gt;</code> element.</p>
  
  <p>My thinking was that we need a two-step process: </p>
  
  <ul>
  <li><p>First <code>JQuery</code> reacts on document-ready HTML event and attaches a listener to Angular's <code>$viewContenLoaded</code> using <code>$scope</code> retrieved using <code>[ng-view]</code> element. </p></li>
  <li><p>Then each time a view is loaded my <code>JQuery</code> code will be executed and <code>JQuery UI</code> components get activated and wired.</p></li>
  </ul>
  
  <p>Apparently my logic is flawed somewhere. Please point me in the right direction.</p>
  
  <p><strong>ADDITIONAL INFO</strong> (<em>posted 03/31/14</em>):  </p>
  
  <p>The rest of my code (controllers, service, routing) is written in <code>TypeScript</code>.  </p>