Angular+JQ+Bootstrap

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
<body>
  <div id="container" ng-controller="MainCtrl">
    <h1>Hello {{name}}</h1>
  </div>
  <div ng-controller="TaskCtrl">
      Add new task:
      <form ng-submit="add()">
          <input ng-model="input" />
          <button type="submit">Add</button>
      </form>
    <table>
      <tbody>
        <tr ng-repeat="task in tasks">
          <td>{{task.done}}</td>
          <td>{{task.text}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

CSS

td{
    padding: 5px;
    border: 2px;
}

CoffeeScript

app = angular.module('taskApp', [])

class @BaseCtrl
  @register: (app, name) ->
    name ?= @name || @toString().match(/function\s*(.*?)\(/)?[1]
    app.controller name, @

  @inject: (args...) ->
    @$inject = args

  constructor: (args...) ->
    for key, index in @constructor.$inject
      @[key] = args[index]

    for key, fn of @constructor.prototype
      continue unless typeof fn is 'function'
      continue if key in ['constructor', 'initialize'] or key[0] is '_'
      @$scope[key] = fn.bind?(@) || _.bind(fn, @)

    @initialize?()


class MainCtrl extends BaseCtrl
  @register app
  # list of dependencies to be injected
  # each will be glued to the instance of the controller as a property
  # e.g. @$scope, @Book
  @inject '$scope'
 
  # initialize the controller
  initialize: ->
    @$scope.name = "World"
    



class TaskCtrl extends BaseCtrl
  @register app
  # list of dependencies to be injected
  # each will be glued to the instance of the controller as a property
  # e.g. @$scope, @Book
  @inject '$scope'
 
  # initialize the controller
  initialize: ->
    @$scope.input = "aaaa"
    @$scope.tasks = [
      text: "learn coffescript"
      done: false
    ,
      text: "learn angular"
      done: true
    ]
 
  add: ->
    @$scope.tasks.push
      text: @$scope.input
      done: false
    @input = ""


angular.bootstrap document, ['taskApp']