Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<div ng-controller="MyCtrl as ctrl">
<p>Watch your console, then click on a letter. Why "myterious" function is launched so many time ???</p>
<button ng-click="ctrl.setValue('B')">Display B</button>
<button ng-click="ctrl.setValue('C')">Display C</button>
<button ng-click="ctrl.setValue('D')">Display D</button>
  <div ng-repeat="item in ctrl.vitals track by $index">
    <p ng-click="ctrl.toggleDetail($index)" ng-bind="item.name"></p>
    <div ng-show="ctrl.myterious(item.name, ctrl.value)">This should only be display under {{item.name}}</div>
    <div ng-show="ctrl.display[$index]">...</div>
    <br>
  </div>
</div>

JavaScript

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

app.controller('MyCtrl', [function() {
	var self = this;

        self.vitals = [
          {name:'A'},
          {name:'B'},
          {name:'C'},
          {name:'D'},
          {name:'E'},
          {name:'F'},
          {name:'G'},
          {name:'H'},
          {name:'I'},
          {name:'J'},
          {name:'K'}
        ];

        self.display = [];
        self.toggleDetail = function(id) {
        		console.log("Toggle launched");
            self.display[id] = !self.display[id];
        };
        
        self.value = 'B';
        self.setValue = function (val) {
        	self.value = val;
        }
        
        self.myterious = function (a, b) {
            console.log(a + ' ' + new Date().getTime());
            if (a === b) {
            	return true;
            } else {
            	return false;
            }
        }
}]);