>>>>The problem is that on the form with several tabs (tabs are on the left side), the first time the form opens the control has the focus. When I start switching between tabs, other tabs first control doesn't have focus (despite having that directive set) and when I go back to the original first tab the control also doesn't have focus anymore. I am wondering if there is a way to fix that behavior.
>>>
>>>Not sure. I guess you could watch for click on the tab and reset focus there ?
>>
>>Here is how the tabs are defined:
>>
>>

>> <div class="col-lg-3 col-md-3 panel-container">
>>                        <ul class="nav nav-pills nav-stacked">
>>                            <li class="active"><a data-toggle="pill" href="#TaxRatesAndFees" ng-class="{true: 'invalid-tab', false: ''}[form.TaxRatesAndFees.$invalid]">Tax Rates and Fees</a></li>
>>                            <li><a data-toggle="pill" href="#SeasonSchedule1" ng-class="{true: 'invalid-tab', false: ''}[form.SeasonSchedule1.$invalid]">Season Schedule 1 Dates</a></li>
>>                            <li><a data-toggle="pill" href="#SeasonSchedule2" ng-class="{true: 'invalid-tab', false: ''}[form.SeasonSchedule2.$invalid]">Season Schedule 2 Dates</a></li>
>>                            <li><a data-toggle="pill" href="#SeasonSchedule3" ng-class="{true: 'invalid-tab', false: ''}[form.SeasonSchedule3.$invalid]">Season Schedule 3 Dates</a></li>
>>                            <li><a data-toggle="pill" href="#SeasonSchedule4" ng-class="{true: 'invalid-tab', false: ''}[form.SeasonSchedule4.$invalid]">Season Schedule 4 Dates</a></li>
>>                        </ul>
>>                    </div>
>>                    <div class="col-lg-9 col-md-9 panel-container">
>>                        <div class="tab-content">
>>                            <div class="tab-pane active" id="TaxRatesAndFees">
>>                                @Html.Partial("TaxRatesAndFees")
>>                            </div>
>>

>>
>>I am not sure what is nav-pills and what is data-toggle. What exactly is happening when we switch between tabs this way? Is there a way to hook to some event?
>
>See the 'Togglable Tabs' section here: http://getbootstrap.com/javascript/ for details.
>Also note the 'shown' event.
>
>
>>When I open the form the first time, the control is shown with a focus. However, when I start switching between tabs defined this way, there is no focus on the control with the sm-focus directive. It is a minor issue, but I am wondering how to make it work?
>
>Presumably since you have multiple elements with the sm-focus attribute (one on each tab pane?) then the directive would fire on all of them. I'd guess that, given that only one input can have focus and that the order in which they are accessed is unknown, where focus finally ends up is unpredictable. In that situation I don't think a directive on the input controls can be used.
>
>Maybe a directive on the tab pane that watches the above mentioned 'shown' event and then looks for a child input with the sm-focus attr and sets that.
>
>BTW what is the 'sm:focus' event used in the directive ?

Hi Viv,

Thanks a lot for your explanation and that reference.

Our current sm-focus directive with my latest changes to make it more flexible is this:

app.directive('smFocus', [ '$timeout', function ($timeout, $parse) {
        return {
            restrict: 'A',

            link: function (scope, element, attribute) {
                var attribValue = attribute.smFocus;

                if (attribValue == '')
                    attribValue = true;
                else
                    attribValue = scope.$eval(attribValue);

         //       console.log('Element Id= ' + element[0].attributes["id"].value + ' attribValue=' + attribValue);
                if (attribValue== true) {
                    scope.$on('sm:focus', function () {
                        $timeout(function () {
                            element[0].focus();
                        }, 10);
                    });
                }
            }
        };
    }]);

Can you tell me how to write the parent directive that would activate the element of the active tab that has sm-focus attribute set up?

It does sound a bit complex to me at the moment...