Вы забыли запятую в одной строке поставить, и пытались брать zip из Groups в то время как сами запихали его в items.
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="Controller">
<h2 >Магазинчег</h2>
<table cols="2" width="90%" border="0">
<tr><td><p>
<label>Цвет рубашки</label>
<select data-ng-model="currentGroup" data-ng-options="group.Name for group in groups"></select></p>
<p><label>Тип рубашки</label>
<select data-ng-model="currentItem" data-ng-options="item.Name for item in currentItems"></select></p>
<p><label>Запястье</label>
<select data-ng-model="currentZap" data-ng-options="zap.Name for zap in currentZaps"></select></p></td>
<td><img src="{{img}}"/></td><tr></table>
<script>
function Controller($scope) {
var groups = [
{
"Id": "1",
"Name": "Белое платье сшитое эльфами ",
"Items": [
{
"Id": "1",
"Name": "Большое",
"Zaps": [
{
"Id": "1",
"Name": "2 Пуговки",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg"
}, {
"Id": "2",
"Name": "3 Пуговки",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/111.jpg"
}
]
}, {
"Id": "2",
"Name": "Маленькое",
"Zaps": [
{
"Id": "1",
"Name": "4 Пуговки",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg"
}, {
"Id": "2",
"Name": "Молния",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/111.jpg"
}
]
}, {
"Id": "3",
"Name": "Среднее",
"Zaps": [
{
"Id": "1",
"Name": "Шнурки",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg"
}, {
"Id": "2",
"Name": "Липучки",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/111.jpg"
}
]
}, {
"Id": "4",
"Name": "XXL Для жиртресток",
"Zaps": [
{
"Id": "1",
"Name": "Магически срастается",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/000.jpg"
}, {
"Id": "2",
"Name": "снимается по заклятью",
"img":"http://testmagaz.tw1.ru/wp-content/themes/magaz15/white/111.jpg"
}
]
}
]
}, {
"Id": "2",
"Name": "Куртка из кожи с жопы дракона",
"Items": [
{
"Id": "5",
"Name": "Для детей",
"img":"http://javascript.ru/forum/image.php?u=11594&dateline=1352658958"
}, {
"Id": "6",
"Name": "Для карликов",
"img":"http://javascript.ru/forum/image.php?u=14174&dateline=1380803229"
}, {
"Id": "7",
"Name": "Для гномов",
"img":"http://javascript.ru/forum/image.php?u=2666&dateline=1353162565"
}
]
}];
$scope.groups = groups; // Все товары
$scope.currentGroup = groups[0]; // Выбранные товар
//Следим за изменением товара
$scope.$watch('currentGroup', function () {
$scope.currentItems = $scope.currentGroup.Items;
$scope.currentItem = $scope.currentGroup.Items[0];
});
//Следим за изменением размера
$scope.$watch('currentItem', function () {
$scope.img = $scope.currentItem.img;
$scope.currentZaps = $scope.currentItem.Zaps;
$scope.currentZap = $scope.currentItem.Zaps[0];
}),
$scope.$watch('currentZap', function () {
$scope.img = $scope.currentZap.img;
})
}
</script>
</div>
</body>
</html>
В примере тип запястья зависит от размера рубашки.
Если вдруг нужно чтобы запястья зависило только от группы а не от размера тогда делаем так.
1) Размещать zip надо в groups рядом с items, а не внутри items
2) Соответственно устанавливать при изменении группы а не items. Тобиш
$watch('currentGroup'
3) Забирать zip из currentGroup а не currentItem. тобиш
$scope.currentZaps = $scope.currentGroup.Zaps;