Form: How to properly connect Live Preview with controller? (AngularJS) - forms

Question

Like everyone else who has asked this question about Angular JS, my problem goes deeper than the simple "how to fix blank option in drop down menu". Basically, I am creating a live preview WITH the form that I am creating. Here is what I mean:
The initial blockquote in the HTML is basically the actual reviews that will be there. The second blockquote is the actual LIVE preview. Finally, the third part is the piece of dilemma I am having.
DILEMMA:
Here is the dilemma I am having:
By removing: ng-model="review.stars" from the select tag, my page will load the 5 stars as expected. However, since I need to bind the ratings already posted up, the live preview AND the initial selection of 5 stars, I have to use ng-model="review.stars" to bind everything together.
BUT, now what happens is that by adding ng-controller=starsController along with the ng-model, the whole thing simply doesn't work. I have tried using a few formulas (and one of those was looking promising, one using an orderProp), but because I NEED to bind the three aforementioned things, it breaks the code and that specific piece.
I can still select an option from the list, but the preview fails to show it. Furthermore, it will NOT automatically show up the 5th star in the drop down (I have to manually select it).
In case you would like a visual aid to understand better what I'm explaining, let me post a picture of the two situations I am referring to. This is the image via a link - I don't have enough rep to post it directly here :/
HTML
<blockquote ng-repeat="review in product.reviews">
<b>Stars: {{review.stars}}</b>
{{review.body}}
<cite>by: {{review.author}}</cite>
</blockquote>
<form name="reviewForm">
<blockquote>
<b> Stars: {{review.stars}}</b>
<br/>
<b> Review: {{review.body}}</b>
<br/>
<cite>by: {{review.author}}</cite>
</blockquote>
<select ng-model="review.stars" ng-controller="starsController" name="stars" id="stars">
<option style="display:none" value=""></option>
<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>
<br/>
JS
app.controller('starsController', ['$scope', function($scope) {
$scope.options = [
{ 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.orderProp = options[4];
}]);

Answer 1

Updated Plunker
To fix this, add ng-init="review={}" to your form tag.
<form name="reviewForm" ng-init="review={}">
Or, even better - move ng-controller higher up the DOM tree (maybe on your form element)
<form name="reviewForm" ng-controller="starsController">
Or the best option, create a custom reviewStars directive:
app.directive('reviewStars', function() {...});