Angular uiRouter set page title from database document

help
1

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'
}