Can not reflect changes in model - angularjs

Question

I have an AngularJS controller like this
var myModule = angular.module('test', []);
myModule.controller('PendataanMainController',
function($scope, $http)
{
$scope.stat1 = "";
$scope.stat2 = "stat2";
$scope.AmbilStat1 = function()
{
$scope.stat1 = "Hallo stat1";
};
$scope.AmbilStat2 = function()
{
$scope.stat2 = "Hallo stat2";
}
}
);
myModule
.directive(
'fonloaded',
function()
{
return {
restrict: 'A',
link: function(scope, element, attrs)
{
var this_element = angular.element(element);
this_element.bind(
'click',
function()
{
//this_element.html('<h2>Hallo dari directive</h2>');
scope.stat1 = "Hallo dari directive";
}
);
scope.$apply();
}
}
}
);
and a HTML like this
<div ng-app="test" ng-controller="PendataanMainController" class="columns clear bt-space15">
<div class="col1-2 fl-space2">
<div class="content-box">
<div class="box-body">
<div fonloaded class="box-header clear">
<h2>{{stat1}}</h2>
</div>
{{AmbilStat2()}}
<div class="box-wrap clear">
{{stat2}}
</div>
</div>
</div>
</div>
<div class="col1-2 lastcol">
<div class="content-box">
<div class="box-body">
<div class="box-header clear">
<h2>Stat 2</h2>
</div>
<div class="box-wrap clear">
{{stat2}}
</div>
</div>
</div>
</div>
</div>
I made a custom directive 'fonloaded' and put it on this part:
<div fonloaded class="box-header clear">
<h2>{{stat1}}</h2>
</div>
and when it got clicked, the directive link function change the value of stat1. I want that new stat1 reflected in the html. But it don't.
I am using AngularJS extension for Chrome. And I can see that the stat1 value has changed, but that change does not reflected on the html.
What would be the problem?

Answer 1

http://plnkr.co/edit/4kiJwrG8Xo0unrNc9Fw7?p=preview
please see fixed sample:
function()
{
return {
restrict: 'A',
link: function(scope, element, attrs)
{
var this_element = angular.element(element);
this_element.on('click',
function(e)
{
// alert('1');
//this_element.html('<h2>Hallo dari directive</h2>');
scope.stat1 = "Hallo dari directive";
scope.$apply();
} );
}
}
}

Answer 2

I must add that I am working within a HTML template (like one from theme forest). I have stripped the ng-app part out of the HTML template to make it stand alone. And now it reflect the changes in the model.
Somehow the HTML template using jQuery to modify the tag which has fonloaded directive. As result {{stat1}} lost by HTML template transformation.