Angular uiRouter set page title from database document

I’m trying to dynamically set the page title in my angular app.

I’ve already have it working with hardcoded title dynamically changing based on the state

.state('faq-detail', {
    url: '/faqs/:faqId',
    templateUrl: 'client/faq/faq-detail.view.ng.html',
    controller: 'FaqListCtrl',
    data: {
      title: 'Faq details'
    }
  });

but I want to get the, in this case the question title, and put it as the page title.

The question comes from mongo database and I’m using angular-meteor.

.state('faq-detail', {
    url: '/faqs/:faqId',
    templateUrl: 'client/faq/faq-detail.view.ng.html',
    controller: 'FaqListCtrl',
    data: {
      title: Faq.findOne({_id: $stateParams.faqId}).question
    },
    resolve: {
      theFaq: function ($meteor, $stateParams) {
        return $meteor.subscribe('faq').then(function () {
          return Faq.findOne({_id: $stateParams.faqId});
        });
      }
    }

I’ve tried this but as you may know, $stateParams is not defiend in the data.title area.

The other method I’ve tried is this one:

// ATEMPT TO SET THE TITLE DYNAMICALLY WITH THE QUESTION
$scope.autorun(() => {
  console.log($scope.getReactively('theFaq'));
  if ($scope.theFaq) {
    let faqTitle = $scope.getReactively('theFaq').question;
    // $state.get('faq-detail').data.title = faqTitle;
    $state.current.data.title = faqTitle;
  }
});

But this instead sets the title after I load another view with the same controller. So now I have the title from the last visited view instead of the current one.

Question

How do I set the page title from an object key value returned from mongo collection in angular-meteor?

faq: {
    question: 'This is page title'
}