title: How to run angular controller before loading the DOM?
body: <p>I have some codes within my angular controller, I'd like this codes to be run on document ready but I noticed that angular runs it as the dom is created. Even though it gives the correct output, it generates some console errors because initially the image src attribute value is null. I set the src attribute value inside my angular controller. So initially i'm getting some console errors. Is there a way to run the controller before loading of the DOM structure?</p>
  
  <p>HTML : </p>
  
  <pre><code>&lt;div class = "tab1 grow"&gt;
      &lt;a href = "#/tab1" class = "tooltip"&gt;
          &lt;img ng-src="{{ imageUrlProfile }}"&gt;
          &lt;span&gt;
             &lt;strong&gt;Profile&lt;/strong&gt;&lt;br /&gt;
          &lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Controller.js:</p>
  
  <pre><code>application.controller('app', function($rootScope, $scope) {
  
          $rootScope.imageUrlProfile = 'images/profile-icon.png';
          $rootScope.imageUrlWork = 'images/exp-icon.png';
          $rootScope.imageUrlEdu = 'images/edu-icon.png';
          $rootScope.imageUrlProject = 'images/project-icon.png';
          $rootScope.imageUrlContact = 'images/phone-icon.png';
  
  });
  </code></pre>