apply CSS class on HTML element inside ng-repeat based on condition

[stackOverflow] - question

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div class="container" ng-controller="MyCtrl as vm" ng-init="active = 1">
  <h4 ng-repeat="(key, val) in vm.headings" ng-click="active = $index" ng-class="active === $index ? 'active' : 'desactive'">
{{key}}
</h4>
</div>

CSS

.container {
  padding: 10px;
}

h4 {
  color: lightgray;
}
h4.desactive {
  color: lightgray !important;
}
h4.active {
  color: black;
}

JavaScript

angular.module('myApp', [])
  .controller('MyCtrl', MyCtrl);

function MyCtrl() {
  var vm = this;
  vm.headings = {
    "HEADING_1": "CONTENT",
    "HEADING_2": "CONTENT",
    "HEADING_3": "CONTENT"
  };
}