title: Why am I getting null for document.getElementById here?
body: <p><strong>Codepen: <a href="http://codepen.io/leongaban/pen/YyWmOo?editors=101" rel="nofollow noreferrer">http://codepen.io/leongaban/pen/YyWmOo?editors=101</a></strong></p>
  
  <p>In <a href="http://codepen.io/leongaban/pen/YyWmOo?editors=101" rel="nofollow noreferrer">my app</a>, I have a simple array of div id names <code>media = ["twitter", "news", "blogs"]</code></p>
  
  <p>I then have a simple for loop which attempts to grab the #ids from the markup and add them into my <code>vm.parameters</code> object.</p>
  
  <p>Currently the div's are showing as <code>null</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/LtrHG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LtrHG.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p><strong>Code in my Controller:</strong></p>
  
  <pre><code>var vm = this;
      vm.parameters = {};
  
  var media = ['twitter', 'news', 'blogs'];
  
  console.log(vm);
  console.log(media);
  
  initParameters();
  
  function initParameters() {
      console.log('initParameters called...');
      for (var i=0; i&lt;media.length; i++) {
          vm.parameters[media[i]]       = {};
          vm.parameters[media[i]].start = 0;
          vm.parameters[media[i]].limit = 10;
          vm.parameters[media[i]].total = 0;
          vm.parameters[media[i]].div   = document.getElementById(media[i]);
          console.log('getElementById =',document.getElementById(media[i]));
      }
  
      console.log('media = ',media);
      console.log('vm.parameters = ',vm.parameters);
  }
  </code></pre>
  
  <p>Markup (Using the <a href="http://ionic.io/" rel="nofollow noreferrer">Ionic framework</a>):</p>
  
  <pre><code>&lt;ion-slide id="twitter"&gt;
      &lt;h3&gt;Twitter stream&lt;/h3&gt;
      &lt;p&gt;Here is content for Twitter&lt;/p&gt;
  &lt;/ion-slide&gt;
  &lt;ion-slide id="news"&gt;
      &lt;h3&gt;News stream&lt;/h3&gt;
      &lt;p&gt;Here is content for News&lt;/p&gt;
  &lt;/ion-slide&gt;
  &lt;ion-slide id="blogs"&gt;
      &lt;h3&gt;Blogs&lt;/h3&gt;
      &lt;p&gt;Here is content for blogs&lt;/p&gt;
  &lt;/ion-slide&gt;
  </code></pre>