collapse.coffee

app = angular.module 'app', []
  
app.directive 'collapse', ->
  restrict: 'A'
  scope:
    isOpen: '=?'
    onToggle: '&'
  controller: ($scope) ->
    $scope.open = =>
      $scope.$evalAsync =>
        $scope.isOpen = true

    $scope.close = =>
      $scope.$evalAsync =>
        $scope.isOpen = false
        
    $scope.toggle = =>
      $scope.$evalAsync =>
        $scope.isOpen = !$scope.isOpen

    @open = $scope.open
    @close = $scope.close
    @toggle = $scope.toggle
    @isOpen = => !!$scope.isOpen
    @
    
  link: (scope, element, attrs) ->
    scope.isOpen = false if angular.isUndefined(scope.isOpen)
    scope.onToggle = scope.onToggle() or angular.identity
      
    scope.$watch 'isOpen', (value) =>
      if value
        scope.open()
      else
        scope.close()
        
      console.log 'toggle!'
      scope.onToggle(value)

app.directive 'collapseToggle', ->
  require: '^collapse'
  restrict: 'A'
  link: (scope, element, attrs, ctrl) ->
    element.on 'click', (e) =>
      e.preventDefault()
      ctrl.toggle()

app.directive 'collapsePane', ($animate) ->
  require: '^collapse'
  restrict: 'A'
  link: (scope, element, attrs, ctrl) ->
    scope.$watch ctrl.isOpen, (value) =>
      $animate[if value then 'removeClass' else 'addClass'](element, 'ng-hide')
    
app.controller 'MainCtrl', ($scope) ->
  $scope.isOpen = true
  
  $scope.onToggle = (value) =>
    console.log "toggle: #{value}"
  
  $scope.open = =>
    $scope.isOpen = true
  
  $scope.close = =>
    $scope.isOpen = false

index.html

<div ng-app="app">
  <div ng-controller="MainCtrl">
    <button ng-click="open()">open</button>
    <button ng-click="close()">close</button>    
    <p>status: {{isOpen}}</p>
    <div collapse is-open="isOpen">
      <a href="#" collapse-toggle>Toggle</a>
      <ul collapse-pane>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
  </div>
</div>