title: Angular: get element within component
body: <p>Suppose I have a component like this</p>
  
  <pre><code>app.component('test',{
      template: '&lt;input type="text" id="inputbox"&gt;&lt;/input&gt;',
      controller: function() {
          ctrl.focusInput = function(){
                  var inputbox = document.getElementById("inputbox");
                  inputbox.focus();
              }
          };
      }    
  });
  </code></pre>
  
  <p>I would like to get the DOM element for the input so I can focus it whenever I want. However <code>inputbox</code> falls in global scope which will be a problem if I use this component more than once. How can I get the DOM just for the input in this component - either by restricting scope of <code>inputbox</code> or using some other mechanism?</p>