AngularJS Example:

HTML

<div ng-app="components" controller="ctrl">
    <div><input type="checkbox" ng-model="showPlural"> Show Plural</input></div>
  <tabs>
    <pane title="Localization">
      Date: {{ '2012-04-01' | date:'fullDate' }} <br>
      Currency: {{ 123456 | currency }} <br>
      Number: {{ 98765.4321 | number }} <br>
      ShowPlural?: {{showPlural}}  
    </pane>
    <pane title="Pluralization" tabshow="showPlural">
      <div ng-controller="BeerCounter">
        <div ng-repeat="beerCount in beers">
          <ng-pluralize count="beerCount" when="beerForms"></ng-pluralize>
        </div>
      </div>
    </pane>
  </tabs>
        <p ng-show="showPlural">I am a p tag with ng-show set to showPlural</p>
        <p ng-hide="showPlural">I am a p tag with ng-hide set to showPlural</p>
        
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<style>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">

JavaScript

angular.module('components', []).
  directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: function($scope, $element) {
        var panes = $scope.panes = [];

        $scope.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        }

        this.addPane = function(pane) {
          if (panes.length == 0) $scope.select(pane);
          panes.push(pane);
        }
      },
      template:
        '<div class="tabbable">' +
          '<ul class="nav nav-tabs">' +
            '<li ng-hide="pane.tabshow==false" ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
              '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
            '</li>' +
          '</ul>' +
          '<div class="tab-content" ng-transclude></div>' +
        '</div>',
      replace: true
    };
  }).
  directive('pane', function() {
    return {
      require: '^tabs',
      restrict: 'E',
      transclude: true,
      scope: { title: '@', tabshow: "=" },
      link: function(scope, element, attrs, tabsCtrl) {
        tabsCtrl.addPane(scope);
      },
      template:
        '<div ng-hide="tabshow==false" class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
        '</div>',
      replace: true
    };
  })

function BeerCounter($scope, $locale) {
  $scope.beers = [0, 1, 2, 3, 4, 5, 6];
  if ($locale.id == 'en-us') {
    $scope.beerForms = {
      0: 'no beers',
      one: '{} beer',
      other: '{} beers'
    };
  } else {
    $scope.beerForms = {
      0: 'žiadne pivo',
      one: '{} pivo',
      few: '{} pivá',
      other: '{} pív'
    };
  }
}