Using global template variable in controllers angularjs

Question

I am trying to add viewTitle to base view or root web app page, e.g.

Root Page

 <div ng-app="app"> 
     {{viewTitle}}
     <div ui-view=""></div>
 </div>

can I change viewTitle in controllers ?

Controller-1

var myApp = angular.module(app, []);
myApp.controller('ChildController', ['$scope', function($scope) {
  // how to update viewTitle here ?
}]);

You Can take help from - http://stackoverflow.com/questions/12506329/how-to-dynamically-change-header-based-on-angularjs-partial-view — Shailendra Singh Deol, Mar 07 '16 at 11:44
Wouldn't you need to specify a controller for that part first? — Satej S, Mar 07 '16 at 11:47

score 2 · Answer 1 · answered Mar 07 '16 at 11:51

One solution may be this: If you use ui-router you can add a title in state: (I use this to translate the title)

.state('login', {
            url: '/login',
            controller: 'AdminLoginController',
            templateUrl: 'app/admin/views/login.html',
            title: {
                'es': 'Iniciar sesión',
                'en': 'Login',
                'de': 'Einloggen'
            }
        })
.state('panelAdmin', {
            url: '',
            controller: 'AdminHomeController',
            templateUrl: 'app/admin/views/panelAdmin.html',
            title: {
                'es': 'Panel de administración',
                'en': 'Control panel',
                'de': 'Führungspanel'
            }
        })

And in $stateChangeStart reload the title:

$rootScope.$on("$stateChangeStart", function (event, toState, toParams, fromState, fromParams) {

  if (toState.title) {
    $rootScope.title = toState.title[$rootScope.cultureLang];
  }

});

In index.html:

<title>{{title}}</title>

score 0 · Accepted Answer · answered Mar 07 '16 at 11:50

I think we can use $rootScope for this purpose. Please see below.

html template

<body ng-app="myApp" >  
        {{viewTitle}}
        <div ui-view=""></div>
    </div> 
</body>

js file

myApp.config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/home');

$stateProvider
    .state('home', {
        url: '/',
        template: '<h1>From nested view </h1>',
        controller: function($rootScope)
        {
            $rootScope.viewTitle = "home";
        }
    });

});

Hope it helps

I tried [this](http://plnkr.co/edit/bFiqVYkyn3sQKmJM8JD2?p=preview), don't think it'll work right. — Satej S, Mar 07 '16 at 11:53

Using global template variable in controllers angularjs

2 Answers2