title: How do i toggle between classes within 2 divs in ionic/angular?
body: <p>example.. i have a match between team-A and team-B. when i click on team-A, i want to add a class call 'selected' to team-A, and then if i click on team-B i want to remove the 'selected' class from team-A and add it to team-B, if i click on team-B again then i want to remove the class all together. Here is what i have so far in play.ionic. 
  <a href="http://play.ionic.io/app/914bb06d2570" rel="nofollow noreferrer">http://play.ionic.io/app/914bb06d2570</a>
  similarly i want it to work for match 2 and 3 as well. very appreciate the help.</p>
  
  <p>html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
      &lt;link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet"&gt;
      &lt;script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body ng-app="app" ng-controller="matchCtrl"&gt;
      &lt;ion-pane&gt;
        &lt;ion-header-bar class="bar-stable"&gt;
          &lt;h1 class="title"&gt;Matches&lt;/h1&gt;
        &lt;/ion-header-bar&gt;
        &lt;ion-content class="padding"&gt;
          &lt;div ng-repeat="match in schedule" ng-init="{'awayActive': false, 'homeActive': false}"&gt;
            &lt;div&gt;Match {{match.matchNum}}&lt;/div&gt;
            &lt;div class="match"&gt;
              &lt;div class="inline" ng-class="{'selected': awayActive}" ng-click="awayActive = !awayActive"&gt;{{match.away}}&lt;/div&gt;
              vs
              &lt;div class="inline" ng-class="{'selected': homeActive}" ng-click="homeActive = !homeActive"&gt;{{match.home}}&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/ion-content&gt;
      &lt;/ion-pane&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>js</p>
  
  <pre><code>angular.module('app', ['ionic'])
  
  .controller('matchCtrl', function($scope){
  
    $scope.schedule = [{
        matchNum: 1,
        away: 'Team A',
        home: 'Team B'
      },{
        matchNum: 2,
        away: 'Team C',
        home: 'Team D'
      },{
        matchNum: 3,
        away: 'Team E',
        home: 'Team F'
      }];
  
  });
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.selected {
    border: 2px solid blue;
  }
  </code></pre>