Angular: Expand Collapse using AngularJS

Expand collapse ( one at a time) with AngularJS using Directive

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="FruitCtrl">
  <div ng-repeat='f in fruits' class='fruit' ng-click='f.show = !f.show'>
    <a href="#" ng-click='makeBold($event, f)' ng-style='{"font-weight": f.isBold}'>{{ f.title }}</a>
    <div ng-show='f.show'>
      {{ f.color }}
    </div>
  </div>
</div>

CSS

.fruit {
  background: #FF735C;
  width: 100px;
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 4px;
  cursor: pointer;
}

.fruit a {
  color: #fff;
}

.fruit:hover {
  background: #3D3240;
}

JavaScript

var myApp = angular.module('myApp', []);

FruitCtrl = function($scope) {
  $scope.fruits = [{
    title: 'apple',
    color: 'red'
  }, {
    title: 'orange',
    color: 'orange'
  }, {
    title: 'banana',
    color: 'yellow'
  }];

  $scope.makeBold = function(e, f) {
    console.log('makeBold')
    f.isBold = 'bold';
    e.stopPropagation();
  }
}

console.log('Hello');