X-Editable Bootstrap Table directive

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
    <link rel="stylesheet" href="style.css">
    
  </head>

  <body ng-controller="TableCtrl">
    <table class="table table-bordered table-striped" >
      <thead>
        <tr>
          <td>Item1</td>
          <td>Item2</td>
        </tr>
        <tr ng-repeat="item in data"> 
          <td><a class="editable editable-click"
            xeditable href="javascript:;" 
            data-type="text" 
            data-placement="right"
            data-ng-model="item.one"
            data-placeholder="Enter Item"
            data-original-title="Enter An Item Here">{{item.one}}</a> </td>
          <td>{{item.two}}</td>
        </tr> 
      </thead>
    </table>
    <p>{{data | json}}</p>
  </body>

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.4/bootstrap-editable/js/bootstrap-editable.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  <script src="script.js"></script>
</html>

// Code goes here

var app = angular.module('app', []); 

app.controller('TableCtrl', ['$scope', function ($scope) {
  console.log('TableCtrl');
  $scope.data = [
    { one: 'foo', two: 'bar' },
    { one: 'bar', two: 'baz' }
  ];
  
  $scope.$on('item:updated', function (evt, item) {
    console.log('item was updated: ', item);
    console.log($scope.data);
  });
}]);

app.directive('xeditable', ['$timeout', function ($timeout) {
  
  return {
    restrict: 'A',
    
    require: 'ngModel',
    
    link: function (scope, elem, attrs, ctrl) {
      console.log(ctrl);
    
      var loadXeditable = function () {
        angular.element(elem).editable({
          display: function (value, srcData) {
            ctrl.$setViewValue(value);
            scope.$apply();
          },
          success: function (response, newValue) {
            scope.$emit('item:updated', scope.item);
          }
        });
      }
    
      $timeout(function () {
        loadXeditable();
      }, 10);
    }
  };
  
}]);

/* Styles go here */




body {
  padding: 15px;
  padding-top: 100px;
}

.dark {
  background-color: #eee;
}