AngularJS - Unable to remove hover style after another style added on click
<p>I'm learning angular and trying to create a simple interface where the user is able to click on an element (out of possible 3) and some <code>css</code> applied. When user hovers over the elements another affect is applied. My current issues are:<br><br>
1. I achieved the desired functionality, however I feel like this is "not the angular way", but rather looks like a hack.<br>
2. Once the user hovers an element and selects it, I dont know how to disable the hover effect for that element.</p>

<p>JSfiddle <a href="http://jsfiddle.net/bgg2eby6/" rel="nofollow">here</a>, please advise.</p>

<p>HTML:</p>

<pre><code>&lt;div ng-app='myApp'&gt;
  &lt;div ng-controller='myController'&gt;
 &lt;div class="row"&gt;
    &lt;div class="col-lg-12 col-md-12 col-sm-12"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-lg-4 col-md-4 statTab" id="1" ng-click="toggleSelected($event)" ng-class="{'statNumberActive' : toggle1}"&gt;
          &lt;span class="statNumber"&gt;0&lt;/span&gt;
          &lt;span class="statDescription"&gt;Views&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-4 col-md-4 statTab" id="2" ng-click="toggleSelected($event)" ng-class="{'statNumberActive' : toggle2}"&gt;
          &lt;span class="statNumber"&gt;0&lt;/span&gt;
          &lt;span class="statDescription"&gt;Reads&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-4 col-md-4 statTab" id="3" ng-click="toggleSelected($event)" ng-class="{'statNumberActive' : toggle3}"&gt;
          &lt;span class="statNumber"&gt;0&lt;/span&gt;
          &lt;span class="statDescription"&gt;Commens&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>JS:</p>

<pre><code> var myApplication = angular.module('myApp', []);

 myApplication.controller('myController', ['$scope', function($scope) {
  $scope.toggleSelected = function(item) {
    var id = item.currentTarget.id;
    switch (id) {
      case "1":
        $scope.toggle1 = true;
        $scope.toggle2 = false;
        $scope.toggle3 = false;
        break;
      case "2":
        $scope.toggle1 = false;
        $scope.toggle2 = true;
        $scope.toggle3 = false;
        break;
      case "3":
        $scope.toggle1 = false;
        $scope.toggle2 = false;
        $scope.toggle3 = true;
        break;
    }
  }
 }]);
</code></pre>

<p>CSS:</p>

<pre><code>.statNumberActive {
  color: rgba(0, 0, 0, .8) !important;
  border-bottom: none !important;
}

.statNumber {
  font-weight: 700;
  font-style: normal;
  font-size: 50px;
  display: block;
  line-height: 40px;
  height: 40px;
  margin-bottom: 5px;
  letter-spacing: -.04em;
  transition: all ease .3s;
}

.statDescription {
  color: rgba(109, 109, 109, 0.3);
  font-size: 18px;
  transition: all ease .3s;
  font-weight: bold;
}

.statTab {
  height: 76px;
  border-bottom: 1px solid rgba(0, 0, 0, .3);
  color: rgba(109, 109, 109, 0.3);
  transition: all ease .3s;
}

.statTab span {
  padding-left: 10px;
}

.statTab:hover &gt; span {
  color: rgba(49, 49, 49, 0.47);
}
</code></pre>