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(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(f) {
	    console.log('makeBold')
    	f.isBold = 'bold'
    }
}

console.log('Hello');