angularjs - Directive working in one controller and not in another -

i trying follow foodme example on angularjs. on step 21. instead of creating ng-model, tried bit different, created plunker here. issue works in restaurants.html , not inside menu.html. can see value of {{restaurant.rating}} when view source , e.g.

<span stars rating="{{restaurant.rating}}" readonly="true"></span> 

in html view-source can see rating="3".

only small change plunker vs sandbox in sandbox use 'restaurant' resource individual restaurant data.

any thoughts/ideas?

the problem property restaurants array of objects , in menu.html aren't accessing proper way. change to

menu rating: {{restaurants[0].rating}} <br /> <span stars rating="{{restaurants[0].rating}}" readonly="true"></span>   

and it'll work. same doesn't happen in restaurants.html because you're iterating through array using ng-repeat.

check out this fork of plunker.

update after talking @parsh in comments, better understand problem code. issue directive doesn't re-rendered when scope changes. can fixed using watch:

link: function (scope, element, attrs, ctrl) {     scope.$watch('rating', function() {         scope.stars = [];         (var = 0; < 5; i++) {             scope.stars.push({'fm-selected': < scope.rating});         }       }); } 

i updated plunker script changes above plus button simulate scope change outside directive.