title: Triggering set focus to 'DIV' using Javascript - NO JQUERY - Angular ng-click
body: <p>Trigger set focus to "DIV" element on click using Angular directive </p>
  
  <pre><code>&lt;a href="#" class="skipToContent" ng-click="showContent()" title="skip-to-main-content"&gt;Skip To Main Content&lt;/a&gt;
  
  
  &lt;div class="getFocus" role="button" tabindex="0"&gt;
          &lt;span&gt;Am Focused&lt;/span&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>When I click on this the link it should shift the focus to the div</p>
  
  <p>To achieve this I wrote this piece of code PSB.</p>
  
  <p>I tried using <a href="https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView" rel="nofollow noreferrer">scrollIntoView()</a>; also but not sure it'll work in all the browsers and it dint work for me too.</p>
  
  <pre><code>$scope.showContent = function() {
      var x = document.querySelector('.skipToContent');
      var y = document.querySelector('.getFocus');
      y.focus();
      console.log(document.activeElement);
  });
  };
  </code></pre>
  
  <p>Note: We cannot add ids or add classes to DOM.</p>
  
  <p><a href="https://jsfiddle.net/wrajesh/wo7gkm7d/" rel="nofollow noreferrer">https://jsfiddle.net/wrajesh/wo7gkm7d/</a></p>