Angular Template Evaluation

HTML

<div ng-app="myApp">
    <div goal game time="Cruze vs Holy" ></div>
</div>

JavaScript

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

app.directive('game', function () {
   return {
       scope: {
           times: '@'
       },
       require: '^ngModel',
       controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
           $scope.goals = 0;
           this.increment = function() {
               $scope.goals++;
               console.log($scope.goals);
               $scope.$apply();
           }
       }],
       template: '<p>Match: [{{times}}]</p><b>Match goals: <span ng-bind="goals"></span></b> {{goals}}'
   };
});

app.directive('goal', function() {
    return {
        require: 'game',
        link: function (scope, el, attrs, gameController) {
            var b = angular.element("<p><button>Increase Match goals</button></p>");
            b.on('click', function() {
                gameController.increment();
            });
            el.append(b);
        }
    };
});