<!DOCTYPE html>
<html>
  
  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/coffee-script/1.3.3/coffee-script.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
    <script type="text/coffeescript" src="app.coffee"></script>
  </head>
  
  <body ng-controller="MainCtrl">
    <div style="width: 400px;">
      <table id="myTable"></table>
    </div>
  </body>

</html>
app = angular.module('angularjs-starter', [])

app.controller 'MainCtrl', ($scope, $compile) ->

  # ****************** BEGIN IMPORTANT CODE ******************

  rowCompiler = (nRow, aData, iDataIndex)->
    linker = $compile nRow
    element = linker $scope
    nRow = element

  renderActionIcon = (cellValue)->
    # cell value will be the ID of the user (1 or 2)

    editLink = "<i class='icon-edit' ng-click='editUser(#{cellValue})'></i>"
    deleteLink = "<i class='icon-trash' ng-click='deleteUser(#{cellValue})'></i>"
    actionHtml = "#{editLink}#{deleteLink}"

    return actionHtml

  # ****************** END IMPORTANT CODE ******************

  $scope.deleteUser = (userId)->
    alert "Deleting user #{userId}"

  $scope.editUser = (userId)->
    alert "Editing user #{userId}"

  data = [
    [1, 'Bob', 'Smith'],
    [2, 'Jane', 'Smith']
  ]

  vendServerData = (source, query, callback, settings)->
    response = 
      aaData: data
      iTotalRecords: data.length
      iTotalDisplayRecords: data.length
    callback (response)



  options = 
    bSortClasses: false
    bServerSide: true
    bSort: false
    fnServerData: vendServerData
    fnCreatedRow: rowCompiler
    aoColumns: [
      {
        "sTitle": ""
        "mRender": renderActionIcon
      },
      { "sTitle": "First Name" },
      { "sTitle": "Last Name" },
    ]

  $('#myTable').dataTable(options)

angular.bootstrap(document, ['angularjs-starter'])
/* CSS goes here */