Tutorial

http://blog.revolunet.com/blog/2013/11/28/create-resusable-angularjs-input-component/

http://blog.safaribooksonline.com/2013/11/07/creating-an-angularjs-component/

simpleApp.directive( 'fundooRating', function() {
        return {
            restrict: 'E',
            template: '<ul class="rating">' +
                '<li ng-repeat="star in stars" ng-class="star" ng-click="toggle($index)">' +
                '\u2605' +
                '</li>' +
                '</ul>',
            scope: {
                ratingValue: '=',
                max: '=',
                readonly:'@',
                onRatingSelected: '&'
            },
            link: function( scope, elem, attrs) {


                var updateStars = function() {
                    scope.stars = [];
                    for (var i = 0; i < scope.max; i++) {
                        scope.stars.push({filled: i < scope.ratingValue});
                    }
                };

                scope.toggle = function(index) {
                    if (scope.readonly && scope.readonly === 'true') {
                        return;
                    }
                    scope.ratingValue = index + 1;
                    scope.onRatingSelected({rating: index + 1});
                };

                scope.$watch('ratingValue', function(oldVal, newVal) {
                        if (newVal) {
                            updateStars();
                        }
                    }

                );
            }
        }

    }
);

• ‘A’ – Attribute (You want to use your directive as <div rating>)
• ‘E’ – Element (Use it as <rating>)
• ‘C’ – Class. (Use it like <div class=”rating”>)
• ‘M’ – Comment (Use it like <!– directive: rating –>