Angular UI Handsontable

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<div data-ng-controller="myCtrl">
   <h3>{{projectName}}</h3>
   <div class="container-fluid">
      <div class="row-fluid">
         <div class="span12">
            <!-- <div id="lineitems-grid" class="table-bordered"></div>-->
            <!-- <p>Selection: {{currentSelection}}</p>
               <p>Selection: <input type="text" ng-model="MySelectedIndex"></p>                      -->
            <ui-handsontable minSpareRows="1" stretchH="'all'" manualColumnMove="false" manualColumnResize="true" selectedIndex="MySelectedIndex" columnSorting="true"
               contextMenu="true" datarows="lineitem in lineitems" id="lineitems-grid">
               <datacolumn width="80" value="lineitem.item.Description" title="'Item'"
                  type="'autocomplete'">
                  <optionlist datarows="option in lineitem.item.Options" clickrow="lineitem.item.Description = option.Description">
                     <img ng-src="{{option.Image}}" style="width: 16px; height: 16px; border-width: 0">{{option.Description}}
                  </optionlist>
               </datacolumn>
               <datacolumn width="200" value="lineitem.description" title="'Description'"
                  readOnly></datacolumn>
               <datacolumn width="50" value="lineitem.quantity" type="'numeric'"
                  format="'0,0.00'" title="'Quantity'"></datacolumn>
               <datacolumn width="50" value="lineitem.price" type="'numeric'"
                  format="'0,0.00'" title="'Price ($)'"></datacolumn>
               <datacolumn width="50" value="lineitem.discount" type="'numeric'"
                  format="'0.0'" title="'Discount (%)'"></datacolumn>
               <datacolumn width="70" value="lineitem.tax" type="'numeric'"
                  format="''" title="'Tax (%)'"></datacolumn>
  ...

CSS

/**
 * angular-ui-handsontable 0.3.3
 * 
 * Date: Thu Feb 28 2013 00:54:12 GMT+0100 (Central European Standard Time)
*/

/**
 * Handsontable 0.8.6
 * Handsontable is a simple jQuery plugin for editable tables with basic copy-paste compatibility with Excel and Google Docs
 *
 * Copyright 2012, Marcin Warpechowski
 * Licensed under the MIT license.
 * http://handsontable.com/
 *
 * Date: Wed Feb 27 2013 19:09:10 GMT+0100 (Central European Standard Time)
*/
 .handsontable {
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.3em;
    font-size: 13px;
}
.handsontable * {
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
}
.handsontable table {
    border-collapse: separate;
    position: relative;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    /*user-select: none; /*no browser supports unprefixed version*/
    border-spacing: 0;
    margin: 0;
    border-width: 0;
    table-layout: fixed;
    width: 0;
    outline-width: 0;
}
.handsontable col {
    width: 50px;
}
.handsontable col.rowHeader {
    width: 50px;
}
.handsontable .colHeader {
    font-weight:bold;
}
.handsontable th, .handsontable td {
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    height: 22px;
    line-height: 21px;
    padding: 0 4px 0 4px;
    /* top, bottom padding different than 0 is handled poorly by FF with HTML5 doctype */
    background-color: #FFF;
    font-size: 12px;
    vertical-align: top;
    overflow: hidden;
}
.handsontable th:last-child {
    /*Foundation framework fix*/
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
}
.handsontable tr:first-child th.htNoFrame, .handsontable th:first-child.htNoFrame, .handsontable th.htNoFrame {
    border-left-width: 0;
    background-color: white;
    border-color: #FFF;
}
.handsontable th:first-child, .handsontable...

JavaScript

var App = angular.module("myApp", ['uiHandsontable']);

App.controller("myCtrl", ["$scope", "$filter", function ($scope, $filter) {
    $scope.projectName = 'angular-ui-handsontable'

    var items = [{
        "Description": "Big Mac",
            "Options": [{
            "Description": "Big Mac",
                "Image": "//a248.e.akamai.net/assets.github.com/images/icons/emoji/hamburger.png",
            Pick$: null
        }, {
            "Description": "Big Mac & Co",
                "Image": "//a248.e.akamai.net/assets.github.com/images/icons/emoji/hamburger.png",
            Pick$: null
        }, {
            "Description": "McRoyal",
                "Image": "//a248.e.akamai.net/assets.github.com/images/icons/emoji/hamburger.png",
            Pick$: null
        }, {
            "Description": "Hamburger",
                "Image": "//a248.e.akamai.net/assets.github.com/images/icons/emoji/hamburger.png",
            Pick$: null
        }, {
            "Description": "Cheeseburger",
                "Image": "//a248.e.akamai.net/assets.github.com/images/icons/emoji/hamburger.png",
            Pick$: null
        }, {
            "Description": "Double Cheeseburger",
                "Image": "//a248.e.akamai.net/assets.github.com/images/icons/emoji/hamburger.png",
            Pick$: null
        }]
    }, {
        "Description": "Fried Potatoes",
            "Options": [{
            "Description": "Fried Potatoes",
                "Image": "//a248.e.akamai.net/assets.github.com/images/icons/emoji/fries.png",
            Pick$: null
        }, {
            "Description": "Fried Onions",
                "Image": "//a248.e.akamai.net/assets.github.com/images/icons/emoji/fries.png",
            Pick$: null
        }]
    }];

    var firstNames = ["Ted", "John", "Macy", "Rob", "Gwen", "Fiona", "Mario", "Ben", "Kate", "Kevin", "Thomas", "Frank"];
    var lastNames = ["Tired", "Johnson", "Moore", "Rocket", "Goodman", "Farewell", "Manson", "Bentley",...