UI Router dynamic <title> tag

Question

I'm adding a title to every state in the ui-router like that:

.state('projects', {
    url: '/',
    templateUrl: 'projects/projects.html',
    ncyBreadcrumb: {
        label: 'Projects'
    },
    data : {title: 'Projects'}
})

And then the title attribute takes that data:

<title ng-bind="$state.current.data.title"></title>

How can I take data from the state parameters and add it to the title in the above example? I tried the following with no luck:

.state('project', {
    abstract: true,
    url: '/projects/:projId',
    resolve:{
        projId: ['$stateParams', function($stateParams){
            return $stateParams.projId;
        }]
    },
    controller: 'projectCtrl',
    templateUrl: 'project/project.html',
    ncyBreadcrumb: {
        label: 'Project',
        parent: 'projects'
    },
    data : {title: '{{state}}'}
}) 

Answer 1

you have to use app.run() in your app.js file and assign your title in $rootScope.title . you can follow this code

app.run(function($rootScope){
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState){

        $rootScope.title=toState.data.title;
    });
});

after this then bind the variable in your html like this

<title ng-bind="title"></title>

I think it will helpful

Answer 2

There is a working example

I would say, you are almost there. The title could look like this:

<title>{{$state.current.data.title}} {{$stateParams.ID}}</title>

Let's have these two states:

  .state('parent', {
      url: "/parent",
      templateUrl: 'tpl.html',
      data : { title: 'Title for PARENT' },
  })
  .state('parent.child', { 
      url: "/child/:ID",
      templateUrl: 'tpl.html',
      controller: 'ChildCtrl',
      data : { title: 'Title for CHILD' },
  })
  ;

And call them like this:

<a ui-sref="parent">
<a ui-sref="parent.child({ID:1})">
<a ui-sref="parent.child({ID:2})">

And with this hook:

.run(['$rootScope', '$state', '$stateParams',
  function ($rootScope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
}])

So, the point is, that in a $rootScope we can access both, $state.current and $stateParams

Check it here (NOTE, to see plunker in separated window, click the right -top corner blue icon - new window will change the title as well)

Answer 3

I'd suggest you to use params option instead of using data option, because params can be optional and you can set it dynamically by passing parameter inside your $state.go or ui-sref directive.

Code

.state('projects', {
    url: '/',
    templateUrl: 'projects/projects.html',
    ncyBreadcrumb: {
        label: 'Projects'
    },
    params: {
        title: { value: null }
    }
});

From Controller

$state.go('projects', {title: 'Page1'}); //you can change title while calling state

From HTML

ui-sref="projects({title: 'Something Else'})"