jsbin.metid.coffee

app = angular.module 'app', []

app.controller 'wellCtrl', ($scope)->
  $scope.foo = 'bar'
  
app.directive 'tabs', ()->
  restrict: 'E'
  link: ()->
  template: "<div ng-transclude />"
  transclude: true
  controller: ()->
    tabScopes = []
    addScope: (scope)->
      tabScopes.push(scope)
    selectTab: (_scope)->
      for tab in tabScopes
        tab.selected = false if _scope != tab
        tab.selected = !tab.selected if _scope == tab
      
app.directive 'tab', ()->
  restrict: 'E'
  scope:
    title: '@'
  require: '^tabs'
  transclude: true
  link: (scope, elem, attr, tabs)->
    tabs.addScope scope
    if typeof attr.selected != 'undefined'
      tabs.selectTab scope
    scope.toggle = ()->
      tabs.selectTab(scope)
  template: "<div class='title' ng-click='toggle()' ng-class='{selected:selected}'>{{title}}</div><div ng-transclude ng-show='selected'></div>"

jsbin.metid.jade

doctype
html
  head
    link(href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css",rel="stylesheet",type="text/css")
    script(src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js")
    script(src="//code.jquery.com/jquery.min.js")
    script(src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js")     
    title Title
  body(ng-app="app")
    .well(ng-controller="wellCtrl")
      | {{foo}}
    tabs  
      tab(title="Tab 1")
        | Here is some text for tab 1
      
      tab(title="Tab 2" selected)
        | Here is some text for tab 2

jsbin.metid.styl

.title
  border solid 1px gray
  padding: 3px
  border-radius: 3px
  margin-bottom: 10px
.selected
  background-color #f00
  color white

Here is an example of using a nested directive in order to create an accordian.

http://jsbin.com/metid/2/edit