AngularJS : change panel header background based on click - angularjs

Question

I have a panel header which I have divided into 2 parts.
when I click on one panel then its background is sky blue and text color is white while other panel background is gray with black text color and clicking on that panel background and text color is changed alternatively.
.prefix_event {
text-align: center;
background: #f2f1f1;
color: #555555;
padding: 10px;
font-size: 12px;
}
.prefix_previous {
text-align: center;
background: #24b6e3;
color: #FFFFFF;
padding: 10px;
font-size: 12px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app class="row">
<div class="col-md-12 col-sm-12 col-xs-12 ">
<div class="panel panel-default set_padding_0 set_margin_0">
<div class="panel-heading set_padding_0 set_margin_0 cursor_pointer">
<div class="row set_margin_0">
<div class="col-md-6 col-sm-6 col-xs-12 text-center prefix_previous" ng-click="option='event_exhibitors'" ng-init="option='event_exhibitors'">
Event Exhibitors
</div>
<div class="col-md-6 col-sm-6 col-xs-12 text-center prefix_event" ng-click="option='previous_exhibitors'">
Previous Exhibitors
</div>
</div>
</div>
<div class="panel-body" ng-show="option==='event_exhibitors'">
<div class="row ">
<div class="inner-addon right-addon col-md-12 col-sm-12 col-xs-12">
<input type="text" class="form-control" placeholder="Search" />
<i class="glyphicon glyphicon-search search_icon_color"></i>
</div>
</div>
</div>
<div class="panel-body" ng-show="option==='previous_exhibitors'">
<div class="row ">
<p>Previous Exhibitors</p>
<p>Previous Exhibitors</p>
</div>
</div>
</div>
</div>
</div>
what i want is. when clicking on previous exhibitors panel. the background color and text color of event exhibitors should be given to previous exhibitors and event_exhibitors should get previous exhibitors background and text color. so it will be vice versa CSS on click.
Any help would be great.

Answer 1

Its very simple using the toggle option like this in the
$scope.toggle="false";
Your HTML will be like this
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 ">
<div class="panel panel-default set_padding_0 set_margin_0">
<div class="panel-heading set_padding_0 set_margin_0 cursor_pointer">
<div class="row set_margin_0">
<div class="col-md-6 col-sm-6 col-xs-12 text-center prefix_previous"
ng-click="toggle = !toggle"
ng-class="{prefix_event : toggle, prefix_previous : !toggle}"
>
Event Exhibitors
</div>
<div class="col-md-6 col-sm-6 col-xs-12 text-center prefix_event"
ng-click="toggle = !toggle"
ng-class="{'prefix_previous' : toggle}"
>
Previous Exhibitors
</div>
</div>
</div>
<div class="panel-body" ng-show="option==='event_exhibitors'">
<div class="row ">
<div class="inner-addon right-addon col-md-12 col-sm-12 col-xs-12">
<input type="text" class="form-control" placeholder="Search" />
<i class="glyphicon glyphicon-search search_icon_color"></i>
</div>
</div>
</div>
<div class="panel-body" ng-show="option==='previous_exhibitors'">
<div class="row ">
<p>Previous Exhibitors</p>
<p>Previous Exhibitors</p>
</div>
</div>
</div>
</div>
</div>
DEMO
UPDATE 1 : Also check the modified plunker in the same link
Change these # Previous Exhibitors
<div class="panel-body" ng-show="!toggle">
Change these # Event Exhibitors
<div class="panel-body" ng-show="toggle">

Answer 2

you can achieve this functionality with simple Jquery.
Change colour of table row onclick
and if you use class="col-xs-12" then it overrides other higher sizes as well and make them 12(col-sm-12,col-md-12,col-lg-12).
http://getbootstrap.com/css/#grid