Angular scopes and losing binding

Question

I haven't been able to find anywhere else that really helps me understand my Angular problem here but I suspect it has something to do with inheritance that I haven't completely grasped yet.

I'm doing an ng-repeat of a custom directive and seeing strange behavior when attempting to update the collection from a resource. Here is the plnkr: http://plnkr.co/edit/QXAFvQix8oUiVMlMuEXw

To see what the issue is, click on the 'Finish Registration' button which retrieves the json from the resource and replaces the current collection. What I expect is for the cards to be replaced by updated cards, but what is happening is that the first 2 cards seem to no longer be bound to the scope (or are somehow zombified) and 2 new cards are added. Each subsequent update updates the new cards as expected. What am I missing?

Answer 1

You are running into an issue with the isolated scope accidentally leaking into other directives defined on the same element.

However, this has been addressed and fixed in Angular v1.2.4 in this commit.

Hence, this version (with only Angular updated) works: http://plnkr.co/edit/kufU5fI90j2lj2jdyLBx?p=preview

The way to write it such that it is AngularJS version agnostic is keeping the relationship between the scopes perfectly clear by nesting the directives:

  <div ng-repeat="student in currentUser.studentCollection">
     <div student-card  
       student="student" 
       unit-schools="unitSchools"></div>
  </div>