Angular value function call on compile - angularjs

Question

The Sample Code For The Question Is Here!
I have some calculated data for some fields. And I get the data using the "total" approach in my example. I understand that the function will be called when the controller is initialized once and then again to get the value itself. But what I realized is the "total" function is being called twice for each when I execute the compile function with the button click. Where total has nothing related with the compile or the data which is used in compile. What is the reason these useless(for my case:) ) calls?
// JS CODE
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.val1 = 1;
$scope.val2 = 2;
$scope.serverData = 99;
$scope.total = function() {
console.log('I am total');
return $scope.val1 + $scope.val2;
}
$scope.compileData = function(){
var injector = angular.element($('#serverDataHere')).injector(),
compile =injector.get('$compile');
$('#serverDataHere').append(compile('<div>{{serverData}}</div>')($scope));
};
}
//// HTML CODE
<div ng-controller="MyCtrl">
<table border="1">
<tbody>
<tr>
<td>{{val1}}</td>
<td>{{val2}}</td>
<td>{{total()}}</td>
<td>{{total()}}</td>
<td>{{total()}}</td>
</tr>
<tr>
<td>Computer</td>
<td>Computer</td>
<td>Computer</td>
<td id="serverDataHere"></td>
<td>X Games</td>
</tr>
</tbody>
</table>
<button ng-click="compileData()">Compile Data</button>
</div>

Answer 1

You are kicking off a digest cycle, which runs ALL evaluations on your page. The {{ }}.
On a side note, you should not do DOM manipulation in a controller, that is why directives exist.
There is also never a reason to access the $injector, $compile, or any service directly from the module. You should inject them using the standard injection of Angular.
myApp.controler('controllerName', function($scope, $compile) {
return ctrlFunctions;
});

Answer 2

(Not sure if I understand your question correctly.)
But you can just run your total() function once in the controller, assign it to a scope variable and then bind it to the view.
var totalFcn = function() {
console.log('I am total');
return $scope.val1 + $scope.val2;
}
$scope.total = totalFcn();
Then in your view, just put the total variable instead of the function call.
<td>{{total}}</td>