jsbin.inAxajE.coffee

angular.module 'App', []

TicTacToeCntl = ($scope) ->
  init = ->
    @reset = =>
      @board = (['','',''] for [1..3])
      @nextMove = 'X'
      @winner = ''
      @grade()

    @dropPiece = (row, col) =>
      if not @winner and not @board[row][col]
        @board[row][col] = @nextMove
        @nextMove = if @nextMove == 'X' then 'O' else 'X'
        @grade()

    @grade = =>
      same = (a,b,c) -> if a==b and b==c then a else ''
      b = @board
      row = (r) -> same b[r][0], b[r][1], b[r][2]
      col = (c) -> same b[0][c], b[1][c], b[2][c]
      diagonal = (d) -> same b[0][1-d], b[1][1], b[2][1+d]

      @winner = row(0) or row(1) or row(2) or 
                col(0) or col(1) or col(2) or
                diagonal(-1) or diagonal(1)
        
    @reset()    
 
  init.apply $scope

jsbin.inAxajE.jade

html(ng-app='App')
head
  title Tic Tac Toe
  script(src='http://code.angularjs.org/1.2.0/angular.min.js')
body
  h4 Tic-Tac-Toe
  div(ng-controller='TicTacToeCntl')
    | Next Player: {{nextMove}}
    .winner(ng-show='winner') Player {{winner}} has won!
    table.board
      tr(ng-repeat='row in board track by $index')
        td(ng-repeat='cell in row track by $index'
          ,ng-click='dropPiece($parent.$index, $index)'
          ) {{cell}}
    button(ng-click='reset()') reset board

jsbin.inAxajE.less

@side: 40px;

tr {
  height: @side+2px;
}

td {
  width: @side;
  font-size: @side * 0.8;
  border: 1px solid black;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}