title: $viewContentLoaded firing before view content is loaded
body: <p>Here's the shizzle: I have a basic one page angular app where I'm building my portfolio. In controllers I have 3 controllers, and projects is the one I'm having trouble with.</p>
  
  <p>I'm using ng-repeat to get out each project in a list. I'm then targeting them by javascript to resize them correctly.</p>
  
  <p>The thing is that it simply doesn't resize them. They're not loaded before JW.core runs, even if I'm going with $viewContentLoaded as suggested. Hence they are 0px x 0px instead of for example 500 x 500.</p>
  
  <p>I know this since if I set a timeout on the  resize function call within JW.core, it's fine. Then each project has been repeated and can be resized accordingly.</p>
  
  <p>I also figured that since I'm pretty new to angular, I'm probably doing something wrong. </p>
  
  <p>controllers.js:</p>
  
  <pre><code>function mainCtrl($scope) {
  }
  
  function projectsCtrl($scope, $http) {
    $http.get('data/projects/projects.json').success(function(data) {
          $scope.projects = data;
    });
  
    $scope.$on('$viewContentLoaded', function () {
        new JW.core();
    });
  }
  
  function aboutCtrl($scope, $http) {
    $http.get('data/about/about.json').success(function(data) {
          $scope.about = data;
    });
  }
  </code></pre>
  
  <p>core.js:</p>
  
  <pre><code>var JW = JW || {};
  
  JW.core = function() {
  
      var initialise = function () {
              new JW.elementDimensions();
          };
  
      initialise();
  
  };
  </code></pre>
  
  <p>elementdimensions.js:</p>
  
  <pre><code>var JW = JW || {};
  
  JW.elementDimensions = function () {
  
      var scrollbarWidth,
          resizeDim = function (e, ww, wh) {
  
              var wh = window.innerHeight;    
  
              $(e).width(ww + 'px');
              $(e).height(wh + 'px');
  
          },
  
          initialise = function () {
  
              var ww = window.innerWidth - scrollbarWidth,
                  $targets = $('#projects').find('.project');
  
              $('.project-wrapper').width((window.innerWidth - scrollbarWidth) * $targets.length);
              $('.project-wrapper').height(window.innerHeight);
  
              _.each($targets, function(e) {
                  resizeDim(e, ww);
                  console.log(e);
              })
  
          };
  
  
      initialise();
  
      $(window).on('resize', function() {
          initialise();
      });
  
      return this;
  
  };
  </code></pre>
  
  <p>and the view:</p>
  
  <pre><code>    &lt;div class="project" ng-repeat="project in projects"&gt;
  
          &lt;div class="project-img" style="background: url('{{project.imageUrl}}') fixed;" id="{{project.id}}"&gt;
              &lt;div class="info-container"&gt;
                  &lt;h1&gt;{{project.title}}&lt;/h1&gt;
                  &lt;p class="description"&gt;
                      {{project.description}}
                  &lt;/p&gt;
                  &lt;div class="tags"&gt;
                      &lt;ul&gt;
                          &lt;li ng-repeat="tag in project.tags"&gt;{{tag}}&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;a class="goto" href="{{project.link}}"&gt;{{project.linktext}} →&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>