Angular bind table to cross data
<p>Basically I am trying to two-way bind to a table of values based on the intersection of point in the table.</p>

<p>I've set up a plnkr of what I am trying to achieve here...</p>

<p><a href="http://plnkr.co/edit/1b6Bq5I7I4nFMDuXzLgG" rel="nofollow">Angular Bind To Value Table</a></p>

<p>So given this set of data...</p>

<pre><code>$scope.beers = [
{ id: 27, description: "Hopslam Ale" },
{ id: 28, description: "Founders Kentucky Breakfast Stout" },
{ id: 29, description: "Zombie Dust" } ];

$scope.characteristics = [
{ id: 3, description: "ABV" },
{ id: 4, description: "IBU" },
{ id: 5, description: "Calories" },
{ id: 6, description: "Reviews"}];

$scope.crossData = [
{ beerId: 27, characteristicId: 3, value: 10 },
{ beerId: 27, characteristicId: 4, value: 70 },
{ beerId: 27, characteristicId: 5, value: 300 },
{ beerId: 27, characteristicId: 6, value: 3419 },
{ beerId: 28, characteristicId: 3, value: 11 },
{ beerId: 28, characteristicId: 4, value: 70 },
{ beerId: 28, characteristicId: 5, value: 336 },
{ beerId: 28, characteristicId: 6, value: 2949 },
{ beerId: 29, characteristicId: 3, value: 6 },
{ beerId: 29, characteristicId: 4, value: 50 },
{ beerId: 29, characteristicId: 5, value: 186 },
{ beerId: 29, characteristicId: 6, value: 1454 }];
</code></pre>

<p>How can I two-way bind to the value in the cross data?</p>

<pre><code>&lt;table class="table table-striped"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;#&lt;/th&gt;
      &lt;th ng-repeat="char in characteristics"&gt;
        {{ char.description }}
      &lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr ng-repeat="beer in beers"&gt;
      &lt;td&gt;{{ beer.description }}&lt;/td&gt;
      &lt;td ng-repeat="char in characteristics"&gt;
        &lt;!-- some kind of binding expression here --&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>Any help would be greatly appreciated.</p>