title: AngularJS - Wait for View HTML to Load Before Executing Variable Assignment?
body: <p>I have a page in AngularJS that looks like</p>
  
  <pre><code>&lt;body ng-controller="mainController"&gt;
      &lt;my-view&gt;&lt;/my-view&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Inside the <code>my-view</code> file, I have an input element:</p>
  
  <pre><code>&lt;div&gt;
      &lt;input id="my-input" type="file"&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>In my <code>mainController</code>, I assign the file input element to a <code>$scope</code> variable.  In about 50% of page loads, the <code>$scope</code> variable is assigned a null value.  I assume this is because the  element hasn't actually been loaded onto the DOM when my controller assigns the variable.</p>
  
  <p>I tried using</p>
  
  <pre><code>angular.element(document).ready(function(){
      $scope.fileChooser = document.getElementById('my-input');
  });  
  </code></pre>
  
  <p>but this doesn't seem to solve the problem since the request for the <code>my-view</code> HTML file is asynchronous and is made after the initial page load.  I found a temporary solution by wrapping the variable assignment inside of a <code>setTimeout()</code>, but I'd like to avoid this. </p>
  
  <p>Is there a built-in way in Angular to wait for all views to load before performing code execution?</p>