acha-framework/src/frontend/core/scripts/directives/tabs/template.html

is a modular framework on both client (angular.js) and server (node.js) side, it provides security, orm, ioc, obfuscation and ...

<div ng-show="visible" class="af-tabs af-component {{::cssClass}} {{:: position === 'right'? 'tabs-right':''}} {{:: position === 'left'? 'tabs-left':''}}">
    <ul ng-if="position !== 'bottom'" class="clearfix tab-header" role="tablist">
        <li role="presentation"
            ng-repeat="step in steps"
            class="{{step.disabled ?'disabled':''}} {{::step.cssClass}} {{step === model ? 'active' : ''}}">
            <a href="javascript:void(0)"
               ng-click="vm.prepareForPick(step, $event)">
                <i ng-if="::step.icon" class="{{::$eval(step.icon)}}"></i>
                <span>&nbsp;{{::$eval(step.title)|textOrTranslate:$eval(step.titleTranslate)}}</span>
            </a>
        </li>
    </ul>
    <div class="tab-content">
        <div role="tabpanel"
             ng-repeat="step in steps"
             ng-if="(keepScope)||(step === model)"
             ng-bind-html="step.content|to_trusted_html"
             class="tab-pane {{::step.cssClass}} {{step === model ? 'active' : ''}}"></div>
    </div>
    <ul ng-if="position === 'bottom' || position === undefined" class="clearfix tab-header" role="tablist">
        <li role="presentation"
            ng-repeat="step in steps"
            class="{{step.disabled ?'disabled':''}} {{::step.cssClass}} {{step === model ? 'active' : ''}}">
            <a href="javascript:void(0)"
               role="tab"
               ng-click="vm.onPick(step)"
               data-toggle="tab">
                <i ng-if="::step.icon" class="{{::$eval(step.icon)}}"></i>
                <span>&nbsp;{{::$eval(step.title)|textOrTranslate:$eval(step.titleTranslate)}}</span>
            </a>
        </li>
    </ul>
</div>