How to skip focus of disabled tabs

Question

I have an html page with multiple tabs of which one or more can be disabled based on some condition in Angular. (At least one of them will always be enabled)

<tabset>
    <tab ng-disabled="vm.disableTab(1)">
    <tab ng-disabled="vm.disableTab(2)">
    <tab ng-disabled="vm.disableTab(3)">
</tabset>

When a user enters the page, the first tab gets focus regardless of whether or not it's disabled.
I would like it to initially focus/show the first tab that is not disabled. How would I achieve such a thing?

EDIT: plnkr: http://plnkr.co/edit/NWQDPk3DgBUpLqA0vRPw?p=preview

Answer 1

Need to create custom directive which will perform following activity,

• Identify disabled TAB if its first tab then remove its 'active' css
• Iterate second active tab from the tab list check whether its disable or not.
• If second also disabled then move to next...and so on..
• If second tab found active then add 'active' css and trigger click of respective anchor tag. Which will show its respective div contents on UI.

Your JS directive,

.directive('activeTabs', function($compile)

{

return {
    link: function(scope, el, attrs) {
        var tabs = el.find('li');
        setTimeout(function(){
            var activeTab = false;
            for (var i = 0; i < tabs.length; i++)
            {
                if (activeTab)
                    break;
                tab = tabs[i];
                if (!angular.element(tab).hasClass("disabled"))
                {
                    angular.element(tab).addClass('active');
                    tab.active = true;
                    activeTab = true;
                    var a = angular.element(tab).find('a')[0];
                    a.click();
                    break;
                }
                else
                {
                    tab.active = false;
                    angular.element(tab).removeClass('active');
                }
            }
        },10);
    }
}
});

Your HTML with new directive,

<div ng-controller="test">
    <tabset active-tabs> <!--New directive is here-->
      <tab heading="One" disabled="isDisabled(1)">This should not be shown</tab>
      <tab heading="Two" disabled="isDisabled(2)">This should receive initial focus</tab>
      <tab heading="Three" disabled="isDisabled(3)">Three</tab>
    </tabset>
  </div>

Update Plunker