Angularjs Populating Form data (Select from other Select) [closed]

Question

I am building a little shopping cart. I have different products that each have different options. The options select should only show the options for the selected product.

1. How do i populate the selects? Is my $scope.products even possible this way?
2. Once i populate the options, each option should change the cost/price of the selected product. How do i achieve this kind of "chain-binding" with Angular?

My JS looks like that:

$scope.products = [{
    name: 'Normal Product',
    cost: 25,
    options: ["Option #1", "Option #2"]
},

{
    name: 'Cool Product',
    cost: 100,
    options: ["Option #1", "Option #2"]
}, {
    name: 'Sick Produckt',
    cost: 150,
    options: ["Option #1", "Option #2"]
}];

And HTML:

<td>
<select ng-model="item.product" ng-options="p.name for p in products">
</select>
</td>
<td <select ng-model="item.option" ng-options="o for o in item.product.options">
</select>
</td>

JSFiddle: http://jsfiddle.net/NyvbN/2/

Answer 1

The only problem was that you did not close the td tag: You have <td without closing >

  <td> <select ng-model="item.option" ng-options="o for o in item.product.options">

Your fiddle works fine otherwise.