<html .... data-ng-controller="MainController as ctrl">
<title ng-bind="ctrl.title"></title>
https://docs.angularjs.org/api/ng/directive/ngCont...
// UPD
Ах, видать у Вы еще незнакомы с примитивами в JS. Они передаются по значению, а не по ссылке.
Я бы на Вашем месте сделал так:
angular.module('app', [])
.service('PageTitle', function() {
this.title = 'default';
this.setTitle = function (title) {
this.title = title;
};
this.getTitle = function () {
return this.title;
};
})
.controller('MainCtrl', function(PageTitle) {
PageTitle.setTitle('Foo Bar');
})
.directive('title', function (PageTitle) {
return {
restrict: 'E',
link: link
};
function link($scope, $el) {
$scope.$watch(watchFn, updateFn);
function watchFn() {
return PageTitle.getTitle();
}
function updateFn(title) {
$el.html(title);
}
}
});