title: Cannot read property 'style' of null - angularjs
body: <p>I have set up a controller in which I call a function defined in a service.</p>
  
  <pre><code>angular.element(document).ready(function() {
      FilterDataService.checkForFilters($scope.mediaTypeList, 'filterAddMediaType');
    });
  </code></pre>
  
  <p>Below is the function:</p>
  
  <pre><code>this.checkForFilters = function(list, filterSection) {
    if (list &lt; 1) {
      document.getElementById(filterSection).style.display = 'none';
    }
    else {
      document.getElementById(filterSection).style.display = 'inline-block';
    }
  };
  </code></pre>
  
  <p>I have no issues calling and getting results from this function after my view and controller has loaded. However when I call this function on page view+controller load I get the following error</p>
  
  <pre><code>TypeError: Cannot read property 'style' of null
  </code></pre>
  
  <p>The error is with this line </p>
  
  <pre><code>document.getElementById(filterSection).style.display = 'none';
  </code></pre>
  
  <p>I figured the issue was because I am trying to set a style on a div element which has not loaded yet so I put in the following:</p>
  
  <pre><code>angular.element(document).ready(function() {...
  </code></pre>
  
  <p>However this did not solve my issue. What am I doing wrong?</p>
  
  <p>EDIT: I also tried the following:</p>
  
  <pre><code>angular.element('#' + filterSection).ready(function() {
        document.getElementById(filterSection).style.display = 'none';
      });
  </code></pre>