How to Dynamically Change Header Based on Angularjs Partial View

How to dynamically change header based on AngularJS partial view?

You could define controller at the <html> level.

 <html ng-app="app" ng-controller="titleCtrl">
   <head>
     <title>{{ Page.title() }}</title>
 ...

You create service: Page and modify from controllers.

myModule.factory('Page', function() {
   var title = 'default';
   return {
     title: function() { return title; },
     setTitle: function(newTitle) { title = newTitle }
   };
});

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

Here is the concrete example: http://plnkr.co/edit/0e7T6l

How to change pageTitle dynamically on state change angularjs inside state routing

Inside $state.go() you can do:

$state.go('test', {pageTitle: $scope.title});

(or it will be data.pageTitle: $scope.title, I'm not absolutely sure).

And you didn't include any HTML, so don't forget to bind value to title tag like this:

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

How to set page title with AngularJS

The $routeChangeSuccess event will be triggered no matter what, so avoid the error by testing the existence of the route:

myApp.run(['$location', '$rootScope', function($location, $rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {

        if (current.hasOwnProperty('$$route')) {

            $rootScope.title = current.$$route.title;
        }
    });
}]);

Open multiple instances of same partial view and controller in angularJS

Actually the issue was, I was calling chart drill down method in core JavaScript which was replacing $scope with last opened.
Resolved the issue by getting scope with JQuery

var scope= angular.element($('.k-state-active').find('.tempDiv')[0]).scope();

and called angular function with this scope variable.

How can I dynamicly change the title tag?

You can change the HTML title and head elements on a per-view basis by using angularjs-viewhead.

here how to use it.

put the angularjs-viewhead.js in your asset folder
Declare as a dependency of your application as normal
var app = angular.module('myApp', ['ng', 'viewhead']);
This sort of setup can be achieved in an AngularJS application using the view-title directive. First, set up your title element to bind to the special scope variable viewTitle, which will be set when a tilted view is instantiated:

   </title ng-bind-template="{{viewTitle}} - FooBaz">FooBaz</title>

With this in place, add to each view's template a single view-title element setting the view's title:

   <view-title>About</view-title>