angularjs下拉菜单上的空选择

我偶然发现angularjs有个问题。我最近开始学习，但遇到了一个问题。我发现有几个人也有同样的问题，但他们的代码执行方式与我大不相同。所以，我能够把一些东西组合起来。在任何情况下，这就是我试图做的：在我的表单中，下拉菜单自动选择第一个选项，由于某种原因，它是空白的，与angularjs默认保护或其他有关

在尝试下面的代码之前，到目前为止，代码工作正常。现在，表单的最后一部分，如下图所示的星星，总是打开的，不管什么时候，事实上，它应该只在被要求时才打开。此外，由于编码错误，即使该部分也因编码错误而无法正常工作。我相信，通过纠正下面代码中的主要问题，所有次要问题都会在这个过程中自行解决

无论如何，这是HTML，后面是js部分：

<blockquote ng-repeat="review in product.reviews">
                <b>Stars: {{select.stars}}</b>
                {{review.body}}
                <cite>by:  {{review.author}}</cite>
            </blockquote>

            <form name="reviewForm">

            <blockquote>
                <b> Stars: {{select.stars}}</b>
                <br/>
                <b> Review: {{review.body}}</b>
                <br/>
                <cite>by: {{review.author}}</cite>
            </blockquote>

                <!--<select ng-controller="starsController" ng-model="review.stars" name="stars" id="stars" style="margin-bottom:10px;margin-left:36px;width:350px;">-->

                <select ng-controller="starsController" ng-model="select" name="stars" id="stars"  ng-options="option.name for option  in typeOptions">
                    <optgroup label="Rate the product">
                     <option value="1 star" name="1 star">1 star</option>
                    <option value="2 stars" name="2 stars">2 stars</option>
                    <option value="3 stars" name="3 stars">3 stars</option>
                    <option value="4 stars" name="4 stars">4 stars</option>
                    <option value="5 stars" name="5 stars" selected="selected">5 stars</option>
                    </optgroup>
                </select>

---

我会这样做：

HTML:

---

在检查了你的建议和链接后，我对它进行了修改，但没有效果。除了一件事之外，它还做了所有它应该做的正确的事情，至少是我能看到的，除了一件事：现在，它选择了正确的星星，但是这个开始也应该出现在顶部，作为回顾的一部分。此外，我将review.star更改为review部分中的select.star，但不确定它的更改是否有意义。JSFIDLE不允许我发布：/

app.controller("starsController", 
function MyCtrl($scope) {

    $scope.typeOptions = [
    { name: '1 star', value: '1 star' }, 
    { name: '2 stars', value: '2 stars' }, 
    { name: '3 stars', value: '3 stars' },
    { name: '4 stars', value: '4 stars' },
    { name: '5 stars', value: '5 stars' }
    ];

    $scope.select = $scope.typeOptions[4];

    }
    );

<select ng-model="select" ng-options="option.name for option  in typeOptions"></select>

$scope.typeOptions = [
{ name: '1 star', value: '1 star' }, 
{ name: '2 stars', value: '2 stars' }, 
{ name: '3 stars', value: '3 stars' },
{ name: '4 stars', value: '4 stars' },
{ name: '5 stars', value: '5 stars' }
];

$scope.select = $scope.typeOptions[4];