angularjs - IONIC: Changing colors dynamically on sidemenu demo -

i'm writing ionic framework "sidemenu" type of app (based on sidemenu demo/starter) allows user choose theme (basically, bars , buttons colors). problem when user clicks button change dynamically theme, changes color of menu's header , not color of views header (stays in first color of array). here codepen example (just click on "change color" button on side menu):

http://codepen.io/anon/pen/oxqqqm

note: variable $scope.temabar starts "ionic color positive" ($scope.temabar = 'positive';) , changed when button "change color" clicked.

can tell me i'm doing wrong? thanks

well code pen not work can't tell wrong if want change classes dynamically use ng-class directive. simple, easy, fast, , works. if using ng-class please fix codepen , update answer :d https://docs.angularjs.org/api/ng/directive/ngclass

and 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 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) {  });