Button bar button's active state are disappearing. When we click on it "active" class is assigned and removed immediately. It should stay active.
html page
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title>Filter with Button Bar</title>
<script data-require="angular.js@*" data-semver="1.2.15" src="http://code.angularjs.org/1.2.15/angular.js"></script>
<link href="http://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet" />
<script src="http://code.ionicframework.com/0.9.27/js/ionic.bundle.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<div class="bar bar-header bar-light">
<h1 class="title">Filter with Buttons</h1>
</div>
<div class="bar bar-subheader">
<div class="button-bar">
<a class="button {{(type == 'Cats') && 'active' || ''}}" ng-click="setType($event)">Cats</a>
<a class="button {{(type == 'Dogs') && 'active' || ''}}" ng-click="setType($event)">Dogs</a>
<a class="button {{(type == 'Birds') && 'active' || ''}}" ng-click="setType($event)">Birds</a>
</div>
</div>
</body>
</html>
script.js
angular.module('myApp',['ionic'])
.controller('myCtrl',['$scope',function($scope){
$scope.type = 'Cats';
$scope.setType = function(event){
$scope.type = angular.element(event.target).text();
console.log($scope.type);
};
}]);
Plunkr link (http://plnkr.co/edit/zjSMARZzGxQqxndR1Ew3?p=preview)
