title: Angular ui bootstrap focus first invalid tab on submit
body: <p>I am trying to focus the first tab which contains invalid field on a form submit.
  I did manage to focus on the first input field but it doesn't work if the field is in another tab and I have no idea how to make it works.</p>
  
  <p>Here is my html file:</p>
  
  <pre><code>&lt;uib-tabset justified="true"&gt; 
    &lt;uib-tab heading="{{ 'PERSONAL_INFORMATION' | translate }}"&gt;
      inputs...
    &lt;/uib-tab&gt; 
    &lt;uib-tab heading="{{ 'BANK_ACCOUNTS' | translate }}"&gt;
      inputs...
    &lt;/uib-tab&gt; 
    &lt;uib-tab heading="{{ 'CONNECTIVITY' | translate }}"&gt;
       inputs...
    &lt;/uib-tab&gt;
  &lt;/uib-tabset&gt;
  </code></pre>
  
  <p>The directive that focus on the first invalid input:</p>
  
  <pre><code>app.directive('focus', function() {
      return {
          restrict : 'A',
          link : function(scope, elem) {
              // set up event handler on the form element
              elem.on('submit', function() {
  
                  // find the first invalid element
                  var firstInvalid = elem[0].querySelector('.ng-invalid');
  
                  // if we find one, set focus
                  if (firstInvalid) {
                      firstInvalid.focus();
                  }
              });
          }
      };
  });
  </code></pre>
  
  <p>I would appreciate any help.</p>