required属性不检查ng-model是否在可选择的选项中

Question

我的AngularJS应用中有一个表单，帐户可以选择并更新值，让我们说VendorID和ProductID。这些值中的每一个都在选择框中设置，当前供应商在产品下拉列表中驱动允许的值。当用户更改供应商的值时，该页面将加载适用于该供应商的一系列产品。

<div style="margin-top: 10px;">
    Select vendor:
    <select name="vendorID" ng-model="vendorID" ng-options="vendor.id as vendor.name for vendor in vendors" ng-change="loadProducts()" required></select>
</div>
<div style="margin-top: 10px;">
    Select product:
    <select name="productID" ng-model="productID" ng-options="product.id as product.name for product in products" required></select>
</div>

我有两个选择框的required属性，但它只显示检查基础ng模型值是否为非空，而不是它是否是可用选项之一。更改供应商值会将新值放在产品选择框中，但即使没有选择它们，form.productID.$valid属性仍为true且表单可提交。 required属性是否应该捕获此信息，还是只查看ng-model值？

最终发生的事情是用户可以点击“保存”，供应商和产品不同步。当供应商值发生变化时，我可以将产品ID置零/归零，但实际上这些选择框会深入几个级别，我希望保留用户的原始值，以防他们想要将其设置回来而不必重新选择一切。

有没有办法required检查是否选择了其中一个当前选项？

我创建了一个示例here。改变供应商＆＃34;清空＆＃34;产品选择，但不会改变有效性。如果$scope.productID初始化为null，则验证将按预期工作。