Slide 124 - Using the scope property

snippet.html

<div data-ng-app="app">
<div class='html-content'><div data-ng-controller="ProductRatingCtrl">
	<star-rating data-value="{{productMarkCss}}">2 comments</star-rating>
	Mark: 
	<select data-ng-options="mark for mark in marks" data-ng-model="productMark" />
</div></div></div>

snippet.js

angular.module('app',[])
.directive('starRating', function () {
    return {
		restrict: 'E',
		transclude: true,
        scope: {
            "value": "@"
        },
        template: "<p data-ng-class=\"value\" data-ng-transclude></p>"
    };
});

var ProductRatingCtrl = function($scope) {
	
	$scope.marks = [ "one", "two", "three", "four", "five" ];
	
	// Default CSS Class for the product.
	$scope.productMark = "three";
	
	$scope.$watch('productMark', function() {
		$scope.productMarkCss = "rating " + $scope.productMark;
	});
	
};