AngularJS Вкладки себя странно

Question

мне было интересно, если кто-то из вас может облегчить меня и попытаться объяснить, что мне не хватает в этом: http://plnkr.co/edit/opxB2Jfi0Xf0Tq1780vz?p=preview

Выглядит довольно просто для меня, но не работает. Мой код:

<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> 

Спасибо заранее!

Answer 1

модификации в 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; 
    } 

}] 
); 

В 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> 

В основном второй нг-повтора не требуется