title: AngularJS and Handsontable: How to think about data binding between datacolumn elements
body: <p>I am trying to rewrite a JS/jQuery SPA using AngularJS. The SPA is an item editing grid using the amazing <a href="http://handsontable.com" rel="nofollow">Handsontable</a>. I was delighted to see that there is an <a href="https://github.com/warpech/angular-ui-handsontable" rel="nofollow">AngularJS version</a> in the works, and that, for the most part, it works just as expected.</p>
  
  <p>However, I'm having a hard time figuring out how to do something I am doing in jQuery in AngularJS. The grid has (among others) 3 columns, one of which is dependent on the other two. The three columns are cost, selling price and margin ( which is (1 - (cost / price)) * 100 ). I can do the math in the controller and pass the margins into the $scope.items variable for the initial loading, but it obviously does not update when you change the cost or price columns. It seems like the perfect place to do two-way data binding, but I can't figure out how to bind the datacolumn value of margin to the value of two other rows. I feel like there is an obvious way to do this, but since I'm new to AngularJS, I thought I might throw it out to the community.</p>
  
  <p>Thanks in advance!</p>
  
  <h2>Edit:</h2>
  
  <p>So after playing around with some of the answers, I want to refine my question a bit to get to the heart of the matter. I have a REST API serving a JSON document that contains arrays of items from an online point of sale service. Here is a sample with dummy data:</p>
  
  <pre><code>{ '@attributes': {'count':10}, 'Item': [
    { 'customSku':'sampleItem1'
    , 'description':'Sample Item, first'
    , 'defaultCost':'10.00'
    , 'Prices': {'ItemPrice':[
        {'amount':'17.99', 'useType':'Default'}
      , {'amount':'19.99', 'useType':'MSRP'}
      ]}
    }
  , { 'customSku':'sampleItem2'
    , 'description':'Item, Sample, 2nd'
    , 'defaultCost':'20.00'
    , 'Prices': {'ItemPrice':[
        {'amount':'29.99', 'useType':'Default'}
      , {'amount':'39.99', 'useType':'MSRP'}
      ]}
    }
  ]}
  </code></pre>
  
  <p>I'm not joking that the data is structured like this, it totally is. Anyway.</p>
  
  <p>Right now, I am passing this to the view in my controller like this: <code>$scope.items = JSON.parse(request.responseText);</code>. How do I pass the function: <code>$scope.getMargin = function() { return (1 - (cost / price)) * 100 }</code> to the view in such a way that cost and price are scoped to the correct item? I feel like I am really close to getting it, but I haven't quite gotten there. Thanks to the answerers so far!</p>
  
  <h2>Edit 2:</h2>
  
  <p>Plunker <a href="http://plnkr.co/edit/aie9z7swErKFAVMB4noH?p=preview" rel="nofollow">here</a>, as requested!</p>