IONIC: Changing colors dynamically on sidemenu demo - angularjs

Question

I'm writing an Ionic framework "sidemenu" type of app (based on the sidemenu demo/starter) that allows the user to choose a theme (basically, the bars and buttons colors).
The problem is when an user clicks a button to change dynamically the theme, it only changes the color of the menu's header and not the color of the views header (stays always in the first color of the array).
Here is a codepen example (just click on the "CHANGE COLOR" button on the side menu):
http://codepen.io/anon/pen/oXqQqm
NOTE: the variable $scope.temabar starts with the "ionic color positive" ($scope.temabar = 'positive';) and is changed when the button "CHANGE COLOR" is clicked.
Can anyone tell me what i'm doing wrong?
Thanks

Answer 1

Well you code pen does not work so I can't tell you what is wrong but if you want to change classes dynamically I would simply use ng-class directive. It is simple, easy, fast, and works. If you are already using ng-class please fix the codepen and I will update my answer :D https://docs.angularjs.org/api/ng/directive/ngClass
and an example:
http://codepen.io/sevilayha/pen/onfrd
HTML:
<div class="container" ng-app="classApp" ng-controller="mainController">
<div class="page-header">
<h1>Dynamic Angular Classes <small>String Syntax</small></h1>
</div>
<div class="row">
<div class="col-xs-6">
<!-- FORM STUFF =========================== -->
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Type Your Class" ng-model="superClass">
</div>
</form>
<p>Try:</p>
<ul>
<li>text-danger</li>
<li>text-success</li>
<li>text-danger</li>
<li>bg-primary</li>
<li>bg-info</li>
</ul>
</div>
<div class="col-xs-6">
<!-- NGCLASS EXAMPLE ============================ -->
<div class="jumbotron text-center">
<h2 ng-class="superClass">
Stuff Stuff
</h2>
</div>
</div>
</div>
</div>
CSS:
.bubble {
animation:pulse 1s infinite;
-webkit-animation:pulse 1s infinite;
}
#keyframes pulse {
0% { transform:scale(1); }
25% { transform:scale(2); }
75% { transform:scale(1); }
}
#-webkit-keyframes pulse {
0% { -webkit-transform:scale(1); }
25% { -webkit-transform:scale(2); }
75% { -webkit-transform:scale(1); }
}
JS:
angular.module('classApp', [])
.controller('mainController', function($scope) {
});