How to have a static header with dynamic content?

So, I have this static header in my XML:

<ion-header-bar class="bar-positive has-tabs-top" ng-controller="HeaderCtrl as header">
  <h3 class="title">{{ header.headerTitle }}</h3>
</ion-header-bar>  

And I have those two controllers:

var HeaderCtrl;

angular.module('ido.controllers', [])

.controller("HeaderCtrl", function HeaderFunctions(){

    HeaderCtrl = this;

    HeaderCtrl.headerTitle = "aa";
})

.controller("MainCtrl", function MainFunctions() {

    HeaderCtrl.headerTitle = "bb";
})

And this works! However, I am under the impression that I'm doing this the bad way. I mean, I could get a null value from the HeaderCtrl, right? Well, the thing is, there is no way to go to the "Main" screen before getting through the Index, which is where the Header is located.

I just need to know if I'm doing something terrible here or it's fine as it is.

EDIT:

Following the suggestion to use services, this is what I did:

services.js:

angular.module('ido.services', [])

.service("HeaderService", function SetHeaderTitle() {

    var HeaderService = this;

    HeaderService.HeaderTitle = "";
});

controllers.js:

angular.module('ido.controllers', [])

.controller("HeaderCtrl", function HeaderFunctions(HeaderService){

    var HeaderCtrl = this;

    HeaderCtrl.HeaderService = HeaderService;

    HeaderCtrl.HeaderService.HeaderTitle = "Login Header";
})

.controller("MainCtrl", function MainFunctions(HeaderService) {

    var MainCtrl = this;

    MainCtrl.HeaderService = HeaderService;

    MainCtrl.HeaderService.HeaderTitle = "Main";
})

Header HTML:

<ion-header-bar class="bar-positive has-tabs-top" ng-controller="HeaderCtrl as HeaderCtrl">
  <h3 class="title">{{ HeaderCtrl.HeaderService.HeaderTitle }}</h3>
</ion-header-bar>