Dynamic Color Changing - Transition Problem

Hello Everyone,

Code is working, but I’m seeing color changing transition. That is, Firstly page loads default color of “bar-balanced”-Background-Color, and after that,code is working and changeing color with rootScope.HeaderColor.

Does somebody know anything about this issue?

Index.html : <ion-nav-bar class=“bar bar-header bar-balanced” align-title=“center"
ng-style="{‘background-color’: HeaderColor }”>

App.js : TukkanService.getColors().then(function(data) {
$rootScope.HeaderColor = data.HeaderColor;

This happens because your service takes some time to get the color and send it back to your controller.
You should wait the response from your service before you display the view

Can you guide me how to set Color(or) wait before page loading?