Take the 2-minute tour ×

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?

share|improve this question

2 Answers 2

up vote 3 down vote accepted

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/

share|improve this answer
thank you! works as expected. –  zemirco Feb 13 '13 at 14:12
just one more thing: why did you use the controller and not the link function? –  zemirco Feb 15 '13 at 7:14
I tend to use a controller, when: not using $watch or when using an isolated scope. –  Yoshi Feb 15 '13 at 8:16

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.

share|improve this answer
Thanks for your answer. I might be wrong but I think @Yoshi's answer is more angular style. –  zemirco Feb 13 '13 at 14:13

Your Answer


