title: AngularJS: $viewContentLoaded fired before partial view appears
body: <p>For a partial view I want to do some JavaScript stuff that I usually would do with <code>$(document).ready(function() {...})</code>, e.g. bind venet listeners to elements. I know that this doesn't work for AngularJS and partial views loaded into the "root" view.</p>
  
  <p>Thus I added a listener to the controller that listens to the <code>$viewContentLoaded</code> event. The listener's function is invoked, so the event is fired but it seems to me as if it is before the partial view is rendered. Neither do I see the elements when I set a breakpoint in the listener's function and debug it with firebug, nor does the jquery selection within the function find the partial view's elements.</p>
  
  <p>This is what the controller looks like:</p>
  
  <pre><code>angular.module('docinvoiceClientAngularjsApp')
    .controller('LoginController', function ($scope, $rootScope) {
  
  $scope.$on('$viewContentLoaded', function(event) {
    console.log("content loaded");
    console.log($("#loginForm"));   // breakpoint here 
  });
  
  [...]
  </code></pre>
  
  <p>I guess that I am doing something wrong as there had to be more posts on stackoverflow if this is a common bug.</p>
  
  <p>As I am using <strong>ui-router</strong> and <strong>ui-view</strong>, I will give you an excerpt of the routing file:</p>
  
  <pre><code>angular
    .module('docinvoiceClientAngularjsApp', [
      'ui.router',
      'ngAnimate',
      'ngCookies',
      'ngResource',
      'ngMessages',
      'ngRoute',
      'ngSanitize',
      'ngTouch'
    ])
   .config(function ($routeProvider, $stateProvider) {
      $stateProvider
      .state('login', {
          url: '/',
          templateUrl: 'components/login/loginView.html',
          controller: 'LoginController'
      })
      .run(['$state', function ($state) {
          $state.transitionTo('login');
      }])
  
   [...]
  </code></pre>
  
  <p>Any help is appreciated. Thanks and kind regards</p>
  
  <p><strong>UPDATE 1:</strong> I stripped the error down to the following usecase: The loginView.html looks like the following: </p>
  
  <pre><code>&lt;div id="loginContainer" style="width: 300px"&gt;
    &lt;form id="loginForm" ng-submit="login(credentials)" ng-if="session.token == undefined"&gt;
  
  [...]
  </code></pre>
  
  <p>As soon as I remove the <code>ng-if</code> from the div tag, it works as expected. The event is triggered after the DOM is rendered, thus jQuery finds the element. If the <code>ng-if</code> is attached to the div tag, the behaviour is as first described.</p>
  
  <p><strong>UPDATE 2:</strong> As promised I added a working demo that shows the different behaviour when adding a <code>ng-if</code> directive. Can anyone point me the right direction? Don't stick to the login form as such, as there are many more use cases where I want to remove certain parts of a view based on some expression and do some JavaScript stuff after the partial view is ready.</p>
  
  <p>You can find the working demo here: <a href="http://codepen.io/anon/pen/bNdYbr">Demo</a></p>