title: How to trigger UI-Router View Load events?
body: <p>Testing ui-router for the fist time but testing the Events at the moment and I can't seem to understand how to trigger $viewContentLoaded or Loading. Although, I've got stageChangeSuccess, etc working! I just pushed everything to <a href="http://punkbit.com/space_competition/">http://punkbit.com/space_competition/</a> but also added some code here. I expected to trigger the events when a new view is loaded to ui-view. But I guess I'm missing something here!</p>
  
  <pre><code>    &lt;div class="pure-g"&gt;
          &lt;div class="pure-u-1" ui-view&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;!-- s: template partials --&gt;
      &lt;script type="text/ng-template" id="menu.html"&gt;
      &lt;div class="pure-menu pure-menu-open pure-menu-horizontal"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#/home"&gt;home&lt;/a&gt;&lt;/li&gt;
              &lt;li class="pure-menu-selected"&gt;&lt;a href="#/like_gate"&gt;like_gate&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#/terms_and_conditions"&gt;terms_and_conditions&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#/enter_competition"&gt;enter_competition&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;/script&gt;
      &lt;script type="text/ng-template" id="home.html"&gt;
      &lt;p&gt;home.html template! fbLike is {{fbLike}}&lt;/p&gt;
      &lt;/script&gt;
      &lt;script type="text/ng-template" id="enter_competition.html"&gt;
      &lt;p&gt;enter_competition.html template!&lt;/p&gt;
      &lt;/script&gt;
      &lt;script type="text/ng-template" id="like_gate.html"&gt;
      &lt;p&gt;like.html template!&lt;/p&gt;
      &lt;/script&gt;
      &lt;script type="text/ng-template" id="terms_and_conditions.html"&gt;
      &lt;p&gt;terms_and_conditions.html template!&lt;/p&gt;
      &lt;/script&gt;
      &lt;!-- e: template partials --&gt;
  </code></pre>
  
  <p>main.js</p>
  
  <pre><code>angular.module("space_competition", ['ui.router'])
  
  .config(function($stateProvider, $urlRouterProvider, $locationProvider){
  
      $stateProvider
          .state('home', {
              url: '/home',
              templateUrl: 'home.html',
              controller: 'homeCtrl',
              resolve: {
                  fb_like: 'fbLike'
              }
          })
          .state('enter_competition', {
              url: '/enter_competition',
              templateUrl: 'enter_competition.html',
              controller: 'enterCompetitionCtrl',
              resolve: {
                  fb_like: 'fbLike'
              }
          })
          .state('like_gate', {
              url: '/like_gate',
              templateUrl: 'like_gate.html',
              controller: 'likeGateCtrl'
          })
          .state('terms_and_conditions', {
              url: '/terms_and_conditions',
              templateUrl: 'terms_and_conditions.html',
              controller: 'termsAndConditionsCtrl'
          });
  
          $urlRouterProvider.otherwise("/home");
  
          //$locationProvider.hashPrefix('!');
  
  })
  
  .run(function($rootScope){
  
      $rootScope
          .$on('$stateChangeStart', 
              function(event, toState, toParams, fromState, fromParams){ 
                  console.log("State Change: transition begins!");
          });
  
      $rootScope
          .$on('$stateChangeSuccess',
              function(event, toState, toParams, fromState, fromParams){ 
                  console.log("State Change: State change success!");
          });
  
      $rootScope
          .$on('$stateChangeError',
              function(event, toState, toParams, fromState, fromParams){ 
                  console.log("State Change: Error!");
          });
  
      $rootScope
          .$on('$stateNotFound',
              function(event, toState, toParams, fromState, fromParams){ 
                  console.log("State Change: State not found!");
          });
  
      $rootScope
          .$on('$viewContentLoading',
              function(event, viewConfig){ 
                  console.log("View Load: the view is loaded, and DOM rendered!");
          });
  
      $rootScope
          .$on('$viewcontentLoaded',
              function(event, viewConfig){ 
                  console.log("View Load: the view is loaded, and DOM rendered!");
          });
  
  })
  
  .controller('homeCtrl', function($scope, fbLike){
  
      $scope.fbLike = fbLike.liked();
  
  })
  
  .controller('enterCompetitionCtrl', function($scope, fbLike){
  
      fbLike.liked();
  
  })
  
  .controller('likeGateCtrl', function($scope){
  
  })
  
  .controller('termsAndConditionsCtrl', function($scope){
  
  })
  
  .factory('fbLike', function($http, $q){
  
      return {
  
          liked: function(){
              return true;
          }
  
      };
  
  });
  </code></pre>
  
  <p>Anyone experienced could have a look please ?</p>
  
  <p>Thanks : D</p>