AngularJS tabs acting weird - angularjs

Question

I was wondering if some of you could lighten me and try to explain what I miss in this : http://plnkr.co/edit/opxB2Jfi0Xf0Tq1780vz?p=preview
Looks quite simple to me but does not work.
My code:
<section ng-app="myApp">
<div ng-controller="myCtrl">
<ul ng-init="tab=1">
<li ng-repeat="item in data">
<a href ng-click="tab = item.thingy">{{item.name}}</a>
</li>
</ul>
<div ng-repeat="item in data" ng-show="tab === item.thingy">
<img ng-src="{{item.img}}" width="50px"><br>
{{item.year}}</div>
</div>
</section>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope',
function($scope) {
$scope.data = [{
name: "First",
title: "oneTitle",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
year: "2013",
img: "http://static.hdw.eweb4.com/media/wp_400/1/5/42735.jpg",
thingy: 1
}, {
name: "third",
title: "twoTitle",
description: "Quisque pulvinar libero sed eros ornare",
year: "2014",
img: "http://static.hdw.eweb4.com/media/wp_400/1/1/8519.jpg",
thingy: 2
}, {
name: "Second",
title: "threeTitle",
description: "Cras accumsan massa vitae tortor vehicula .",
year: "2015",
img: "http://static.hdw.eweb4.com/media/wp_400/1/5/43326.jpg",
thingy: 3
}, {
name: "fourth",
title: "FourTitle",
description: "Suspendisse vitae mattis magna.",
year: "2011",
img: "http://static.hdw.eweb4.com/media/wp_400/1/5/42413.jpg",
thingy: 4
}];
}
]);
</script>
Thank you in advance!

Answer 1

modifications in script.js:
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', function ($scope) {
$scope.data = [{
name: "First",
title: "oneTitle",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
year: "2013",
img: "http://static.hdw.eweb4.com/media/wp_400/1/5/42735.jpg",
thingy: 1
}, {
name: "third",
title: "twoTitle",
description: "Quisque pulvinar libero sed eros ornare",
year: "2014",
img: "http://static.hdw.eweb4.com/media/wp_400/1/1/8519.jpg",
thingy: 2
}, {
name: "Second",
title: "threeTitle",
description: "Cras accumsan massa vitae tortor vehicula .",
year: "2015",
img: "http://static.hdw.eweb4.com/media/wp_400/1/5/43326.jpg",
thingy: 3
}, {
name: "fourth",
title: "FourTitle",
description: "Suspendisse vitae mattis magna.",
year: "2011",
img: "http://static.hdw.eweb4.com/media/wp_400/1/5/42413.jpg",
thingy: 4
}];
$scope.details = $scope.data[0];
$scope.GetDetails = function(obj)
{
$scope.details = obj;
}
}]
);
In HTML:
<section ng-app="myApp">
<div ng-controller="myCtrl">
<ul ng-init="tab=1">
<li ng-repeat="item in data">
<a href ng-click="GetDetails(item);">{{item.name}}</a>
</li>
</ul>
<div>
{{details.thingy}} <br/>
{{details.name}}<br/>
{{details.title}}<br/>
{{details.description}}<br/>
{{details.year}}<br/>
<img ng-src="{{details.img}}" width="50px"><br>
</div>
</div>
</section>
Basically second ng-repeat is not required