Угловой, обратный вызов не меняет переменную

У меня есть следующий фрагмент

Это мой main.html

<h2 class="txtcenter po-2text" style="padding-top:30px">
    {{title}}
</h2>

Это мой main.ts :

title: string;

ngOnInit() {
    var self = this;
    var ref = firebase.database().ref('schools/' + this.currentUserId());
    ref.orderByChild('title').on('value', function(dataSnapshot) {
        console.log("Title is: " + dataSnapshot.val().title);
        self.title = dataSnapshot.val().title;
    });
}

Несмотря на то, что обратный вызов запускается с некоторыми действительными данными, заголовок не обновляется автоматически. Что мне не хватает?

Любая помощь приветствуется!