Using two controllers within the same form, but code fails (angularjs) - angularjs

Question

Still new to AngularJS and I'm trying to combine two ng-controllers together.
Before I was trying to do this, the initial selected drop down option was correctly chosen. Right now as it stands, the drop down option I designed to be automatically selected is not selected initially.
The reason it's not, is because I am trying to play around with two ng-controllers. The old one works correctly if used by itself. This is the one for the initial drop down option to be correctly selected. Then, there is the second (and newer) ng-controller which is used to "print out" reviews. This controller basically pushes printed reviews onto the web page.
I tried adding that controller to the old one. I tried using that controller separately and add two ng-controllers in my form. I tried placing the drop down menu in a separate div and even an li afterwards and tried adding its own controller in there. So far... no luck.
Anything else I can try?
This is my plunker - it won't print out the text, though it does the rest:
http://embed.plnkr.co/tUTn4L02B57gV1V7psfk/preview
These are the specific parts:
HTML:
<blockquote ng-repeat="review in product.reviews">
<b>Stars: {{review.stars}}</b>
<br/>
{{review.body}}
<br/>
<cite>by: {{review.author}}</cite>
</blockquote>
<form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewCtrl.addReview(product)">
<blockquote>
<b> Stars: {{reviewCtrl.review.stars}}</b>
<br/>
<b> Review: {{reviewCtrl.review.body}}</b>
<br/>
<cite>by: {{reviewCtrl.review.author}}</cite>
</blockquote>
<my-stars controller="starsController" model="reviewCtrl.review.stars" style="margin-bottom:50px;margin-left:36px;width:350px;"></my-stars>
JS:
app.controller('starsController', ['$scope', function($scope) {
$scope.review = {};
$scope.review.stars = '5 stars';
}])
app.directive('myStars', function() {
return {
restrict: 'E',
scope: { model: '=' },
template: '<select ng-model="model" ng-options="option.name as option.value group by option.type for option in options"></select>',
controller: function($scope) {
$scope.options = [
{ name: '1 star', value: '1 star', type:"Rate the product" },
{ name: '2 stars', value: '2 stars', type:"Rate the product" },
{ name: '3 stars', value: '3 stars', type:"Rate the product" },
{ name: '4 stars', value: '4 stars', type:"Rate the product" },
{ name: '5 stars', value: '5 stars', type:"Rate the product" }
];
}
};
/*
this.review = {};
this.addReview = function(product) {
product.reviews.push(this.review);
};
*/
});
app.controller("ReviewController", function() {
this.review = {};
this.addReview = function(product) {
product.reviews.push(this.review);
};
});

Answer 1

Firstly, as #WillIAM already wrote, it's as minimum strange to assign controller to directive's element whereas you already declared controller in directive itself.
Also, I don't see any code where you selecting current product for reviewing. If you want to have default 5 stars mark then create blank review with this property filled.
Fixed plunker

Answer 2

scope: { model: '=' },
By adding this line to the myStars directive you're giving it an isolated scope. This means that no data will be shared between the controller's scope and the directive's scope. If you want to pass in $scope.review.stars you'll need to pass it through the same way you passed in model
Giving your directive it's own controller like this:
<my-stars controller="starsController" model="reviewCtrl.review.stars" style="margin-bottom:50px;margin-left:36px;width:350px;"></my-stars>
Is kind of strange and defeats the purpose of the directive's controller. I would put everything that's in starsController into the directive's controller like so:
controller: function($scope) {
$scope.model = $scope.model || '5 stars'; //default to 5 stars
$scope.options = [
{ name: '1 star', value: '1 star', type:"Rate the product" },
{ name: '2 stars', value: '2 stars', type:"Rate the product" },
{ name: '3 stars', value: '3 stars', type:"Rate the product" },
{ name: '4 stars', value: '4 stars', type:"Rate the product" },
{ name: '5 stars', value: '5 stars', type:"Rate the product" }
];
}
That should fix your issue.