Ionic Global State? One footer for all states/templates?



I am trying to build an mp3 player using ionic tabs.

I would like my player to be on the bottom of the screen, and I want it to be run only once. A single instance of this template and it s controller under the view that remains when tabs change. I need it to be able to access services.

At the moment I have just added the html on the index.html, but then I realized it won’t be able to run functions from my angular service.

What would be the best way to achieve it?

here is my actual code:

<body ng-app="starter">
      The nav bar that will be updated as we navigate between views.
    <ion-nav-bar class="bar-stable">
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
		<div class="tPlayer">
			<div class="time"> 
				<span class="current-position">00:00</span><span class="duration">00:00</span>
			<div class="tPlayer-range range range-calm">
				<input id="range{{}}" type="range" name="time" min="0" max="100" value="0" ng-change="seekTo('{{}}')" ng-model="model.position">
			<div class="tPlayer-buttons">
				<button class="button button-clear"><i class="icon ion-ios-rewind-outline"></i></button>
				<button class="button button-clear play"><i class="icon ion-ios-play-outline"></i></button>
				<button class="button button-clear"><i class="icon ion-ios-fastforward-outline"></i></button>
				<button class="button button-clear"><i class="icon ion-ios-loop"></i></button>
				<button class="button button-clear"><i class="icon ion-ios-list-outline"></i></button>

Thank you


< div class=“tPlayer” ng-controller=“PlayerController”>


I love you, that is exactly what I was looking for


No problem, good luck