How to dynamically change header based on AngularJS partial?

You could define controller at the level

You create service: Page and modify from controllers.

Inject Page and Call 'Page.setTitle()' from controllers.

Example:

"plunker" ng-controller="MainCtrl">
"utf-8">
{{ Page.title() }}
"stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
"http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
"stylesheet" href="style.css">
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js">
"https://raw.github.com/twitter/bootstrap/master/docs/assets/js/bootstrap.js">
"https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js">
"app.js">
{{ Page.title() }}
- "test1">test1
- "test2">test2

3 Replies

Know the answer? Post it — somebody with the same question will find it here.