title: AngularJs: Keyboard navigation using TAB key in different groups/forms/divs
body: <p>I have two groups and I want to separate navigation for them and on last tab control of the group when tab key is pressed then the iteration cycle should be restarted and the focus should move to the initial element of the group (which would be the 0 index)</p>
  
  <p>In given below Example I have added two groups and in the group I have added some text-boxes and assigned not serial order.</p>
  
  <p><strong>Problems</strong></p>
  
  <ol>
  <li>When Pressing tab focus is moving across the groups</li>
  <li>On the last index the cycle is not restarting, instead its going in the address bar</li>
  </ol>
  
  <p><em>Note: I am making an angularjs app and this is just a dummy to provide a clear view of my problem</em></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div role="group" tabindex="-1"&gt;
          &lt;h1&gt;Group 1&lt;/h1&gt;
          &lt;br&gt;
          &lt;input type="text" tabindex="1" /&gt;
          &lt;br&gt;
          &lt;input type="text" tabindex="6" /&gt;
          &lt;br&gt;
          &lt;input type="text" tabindex="4" /&gt;
          &lt;br&gt;
          &lt;input type="text" tabindex="2" /&gt;
          &lt;br&gt;
          &lt;input type="text" tabindex="5" /&gt;
          &lt;br&gt;
          &lt;input type="text" tabindex="2" /&gt;
          &lt;br&gt;
          &lt;button tabindex="7"&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
      &lt;hr&gt;
  
      &lt;div&gt;
          &lt;div role="group" tabindex="-1"&gt;
              &lt;h1&gt;Group 2&lt;/h1&gt;
              &lt;br&gt;
              &lt;input type="text" tabindex="1" /&gt;
              &lt;br&gt;
              &lt;input type="text" tabindex="6" /&gt;
              &lt;br&gt;
              &lt;input type="text" tabindex="4" /&gt;
              &lt;br&gt;
              &lt;input type="text" tabindex="2" /&gt;
              &lt;br&gt;
              &lt;input type="text" tabindex="5" /&gt;
              &lt;br&gt;
              &lt;input type="text" tabindex="2" /&gt;
              &lt;br&gt;
              &lt;button tabindex="7"&gt;Submit&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>