There are multiple techniques available to manage this type of functionality.

I have made modifications to your sample to demonstrate the utilization of isolate scope and transclusion (for the increment() button).

We have encapsulated the star markup within the ratingWidget directive to enhance modularity and maintain it as a self-contained component.

Thanks to the ng-repeat and ng-class directives, we can avoid direct manipulation of HTML elements, as Angular handles the heavy lifting through data binding.

Here is a link to the Plunker example: http://plnkr.co/edit/abcd1234efg56789?p=preview

(If you review the Plunker history, you will observe my use of jQuery for direct element/class manipulation)

HTML:

<div ng-app="sampleApp">
    <div ng-controller="MainController">
        <div rating-widget rate="rating" max-rating="maxRating">
                <!--
                This transcluded content is linked with the parent scope instead of the
                scope of the `ratingWidget`.

                For instance, the `increment()` function is defined in `MainController`
                not in the `ratingWidget`.
                -->
            <button ng-click="increment()">Click</button>
        </div>
    </div>
</div>

JavaScript:

var sampleApp = angular.module('sampleApp', []);

sampleApp.controller('MainController', ['$scope',
    function($scope) {
        $scope.rating = 3;
        $scope.maxRating = 6;

        $scope.increment = function() {
          if ($scope.rating < $scope.maxRating){
            $scope.rating += 1;
          }
        }
    }]);

sampleApp.directive('ratingWidget', function() {
    return {
        restrict: 'A',
        transclude: true,
        scope: {
            rate: '=',
            maxRating: '='
        },
        link: function(scope, element, attr){
            var classes = {
                empty: 'fa-star-o',
                full: 'fa-star'
            };

            scope.stars = [];
            scope.$watch('maxRating', function(maxRating){
              maxRating = maxRating || 5;
              scope.stars.length = maxRating;
              for (var i = 0, len = scope.stars.length; i < len; i++){
                if (!scope.stars[i]){
                  scope.stars[i] = {
                    cssClass: classes.empty
                  };
                }
              }

              updateRating(scope.rate);
            });

            scope.$watch('rate', function(newRating){
                updateRating(newRating);
            });

            scope.selectRating = function(index){
              // Adjust the $index by adding 1 to align with the ratings starting from one.
              scope.rate = index + 1;
            }

            function updateRating(rating){
                rating = rating || 0;
                for (var i = 0, len = scope.stars.length; i < len; i++){
                    var star = scope.stars[i];
                    if (i < rating){
                      star.cssClass = classes.full;
                    } else {
                      star.cssClass = classes.empty;
                    }
                }
            }
        },
        template:   '<div>' +
                        '<div class="ratingList">' +
                            '<span>Hate it</span>' +
                            '<span class="stars">' +
                              '<span class="star" ng-click="selectRating($index)" ng-repeat="star in stars track by $index"><i class="fa fa-lg" ng-class="star.cssClass"></i></span>' +
                            '</span>' +
                            '<span>love it</span>' +
                        '</div>' +
                        '<div ng-transclude></div' +
                    '</div>'

    }
})

---

Edit:

@dan-tang

If the button were placed outside the directive but within MainController, everything would function as expected without the need for transclusion.

However, since the button is within the directive and calls a method defined in MainController, transclusion is necessary to bind the content to the parent scope.

Here's a Plunker showcasing this scenario: http://plnkr.co/edit/uvw098xyz12345?p=preview

HTML:

<div ng-controller="MainCtrl">
    <div>I am: {{name}}</div>

    <div widget>
        <!-- 
        Without transclusion, this will display 'widget', but with transclusion, it will show 'controller'.
        Transclusion allows us to control the scope to which these expressions are bound.
        -->
        <div>I am: {{name}}</div>
    </div>
</div>

JavaScript:

testApp.controller('MainCtrl', ['$scope', function($scope){
    $scope.name = 'controller';
}]);

testApp.directive('widget', function(){
    return {
        scope: true,
        transclude: true,
        link: function(scope, element, attr){
            scope.name = 'widget'
        },
        template: '<div>' +
            '<div>I am: {{name}}</div>' +
            '<div ng-transclude></div>' +
        '</div>'
    }
});

I view transclude in Angular as similar to a closure in JavaScript - it grants control over the scope to which variables and expressions are bound.

Here's a basic JavaScript comparison to illustrate the resemblance between the two concepts in the above example:

var name = 'controller';
var printCallback = function(){
    console.log('name=' + name);
}

function Widget(printCallback){
    var name = 'widget';

    this.printName = function(){
        console.log('name=' + name);
        printCallback();
    }
}

var widget = new Widget(printCallback);
widget.printName();
// Output:
// name=widget
// name=controller