angular.js directive with isolate scope

Question

I know there are already a lot of questions about this topic but I can't make my example work.

See the example at plnkr.co#ua32dkF7fz6X2fA0ZAw3 .

Each teaser has some additional informations that should appear when a user clicks on one of the teasers. However as soon as I click on one of the teasers the additional informations appear below every teaser. I'd like to show them only below the one teaser that I clicked on.

I'm pretty sure that's happening because the directives share the same parent scope. How can I keep the isActive variable private to each teaser?

Answer 1

I would do it like this:

1) html changes:

<teaser ng-repeat="teaser in teasers" teaser="teaser"></teaser>

2) changes to the directive:

restrict: 'E',
replace: true,
scope: {
  teaser: '='
},
controller: function ($scope) {
  $scope.isActive = false;
  $scope.select = function(teaser) {
    $scope.isActive = !$scope.isActive;
  };
}

demo: http://jsbin.com/aqehew/1/

Answer 2

This should do it: http://plnkr.co/edit/EfB3n14Hwk5uijsrp1aR

What I did was to create a new scope for the directive, and moved the active variable to the directive scope.