$watch函数给出了undefined

我是一个非常基础的AngulerJS初学者。

我想做的是，当用户点击一个产品时，会出现该产品的类型，然后他们选择一种类型，然后出现该类型的颜色。我试过使用相同的系统来显示类型，但我的颜色一直未定义。

<section class="colorDisplay">
  <div class="mcolor" ng-repeat="color in shoColor">
  <img ng-src="{{color.image}}"/></div>
</section>

script.js

$scope.prod = {"name":"Pens"};
$scope.typ = {"id":1};
$scope.$watch('prod.name',function(){
    $http.get("products/"+$scope.prod.name+".json").success(function(data){
    $scope.type = data;
    });
    $scope.$watch('typ.id',function(type){
    $scope.shoColor = type[$scope.typ.id].colors;
}); 
})

JSON文件

{
"types":[
    {
        "name":"laser",
        "id":0,
        "image":"d-u-b/pens/laser.png",
        "colors":[
            {
                "color":"Black and Silver",
                "image":"colors/blacksilver.png",
                "prodimage":"d-u-b/pens/laser/blacksilver.png"
            },
            {
                "color":"Red",
                "image":"colors/red.png",
                "prodimage":"d-u-b/pens/laser/red.png"
            }
        ]
    },
    {
        "name":"plain",
        "id":1,
        "image":"d-u-b/pens/plain.png",
        "colors":[
            {
                "color":"Yellow",
                "image":"colors/yellow.png",
                "prodimage":"d-u-b/pens/plain/yellow.png"
            },
            {
                "color":"Blue",
                "image":"colors/blue.png",
                "prodimage":"d-u-b/pens/plain/yellow.png"
            },
            {
                "color":"Cyan",
                "image":"colors/cyan.png",
                "prodimage":"d-u-b/pens/plain/cyan.png"
            },
            {
                "color":"Silver",
                "image":"colors/silver.png",
                "prodimage":"d-u-b/pens/plain/silver.png"
            }
        ]
    }
]
}

我试着把特定类型的id号命名为颜色，把它写成这样:types[0]。颜色，其中0是插入的id号。无论我把手表功能放在哪里，或者我给它起什么名字，它要么是"0"没有定义，要么是"颜色"没有定义。