paper.js angular.js canvas only updates on canvas mouseover - angularjs

Question

I have set up an app with angular.js. I am creating a menu via ng-repeat. Every link calls a function inside a directive that uses paper.js to draw text to canvas.
But canvas not updates until i move the mouse around browser. The function that draws on to the canvas is calling immediately, but the canvas shows nothing without mouse moves away from the link?
angular.js controller that calls draw function inside directive:
.controller('NavCtrl', function($scope, $location, $http, WorkService) {
$scope.works = [];
$http({method: 'GET', url: '/api/v1/work'}). //collects all works
success(function(data, status, headers, config) {
$scope.works = data.objects;
});
$scope.setTitle = function(work) {
$scope.currentTitle=work.title;
$scope.writeTitle(work.title);
};
})
angular.js directive:
.directive('draw', function () {
return {
restrict: 'A',
link: function postLink($scope, element, attrs) {
$scope.writeTitle = function(inText){
var letters = inText.split('');
for(var i=0; i<2; i++){
var text = new PointText(new Point(getRandom(0, 200), getRandom(0, 100)));
text.content = letters[i];
text.style = {
fontFamily: 'Arial',
fontWeight: 'normal',
fontSize: 14,
fillColor: 'red',
justification: 'center'
};
}
}
function getRandom(min, max) {
return Math.random() * (max - min) + min;
}
function initPaper() {
paper.install(window);
paper.setup('canvas');
}
initPaper();
}
};
});
the menu in my base.html that calls controller function to draw:
<div ng-controller=NavCtrl>
<nav>
<a href='#/bilgi'>bilgi</a>
<a ng-click="setTitle(work)" href='#/ardiye/{{work.id}}' ng-repeat='work in works'>{{$index+1}}</a>
</nav>
</div>
---- UPDATE ----
I have added:
<script type="text/paperscript" canvas="canvas">
function onFrame(event) {
}
</script>
this empty onFrame function to base.html and now the canvas updates normally. But why?

Answer 1

Have you tried updating the View?
I had an issue on Firefox and IE11 with the canvas not updating until a mouseover after I initiated some operation.
I just called paper.view.update() at the end of each function and it all went down allright.
If this is the issue, it has nothing to do with Angular

Answer 2

Wrap your code inside your directive function within a scope.$apply() function. This will make sure that it updates the UI.
One other thing, it is convention inside a directive to use to use scope (no dollar sign) instead of $scope. In a controller you are actually passing in the named object $scope. Angular needs to know the actual names of the objects you want to inject. Inside your directive's link function, however, the actual names do not matter. This is because inside link attribute the parameters are passed in a specific order: scope, element, attributes. You could use foo, bar, baz if you wanted but they will still be resolved as scope, element, atttributes.
With this in mind you could actually use $scope but realize that you can do that only because of the order it is inside the function parameter list.
link: function postLink(scope, element, attrs)
scope.writeTitle = function(inText){
scope.$apply(function () {
var letters = inText.split('');
for(var i=0; i<2; i++){
var text = new PointText(new Point(getRandom(0, 200), getRandom(0, 100)));
text.content = letters[i];
text.style = {
fontFamily: 'Arial',
fontWeight: 'normal',
fontSize: 14,
fillColor: 'red',
justification: 'center'
};
});
}