title: Problems Monitoring Changes on {{values}} to Trigger Directive manipulations of DOM
body: <p>I am working with two different controllers.</p>
  
  <p>The first controller has two buttons on the front end.  One is an increment button and another is a decrement button.  When a button is pressed a value representing which button was pressed is stored in the $rootScope and an event is broadcast to let the second controller know to spring into action.</p>
  
  <p>The second controller displays (using ngRepeat) each element in an object.  In this application each element represents a student. When an increment or decrement button is pressed, the second controller must update the grade for each of the students (we're implementing a curve).</p>
  
  <pre><code>[{
  "name": "value",
  "grade": "value"
  },{
  "name": "value",
  "grade": "value"
  },{
  .
  .
  .
  }];
  </code></pre>
  
  <p>I am trying to write a directive that will add a class from <a href="http://daneden.github.io/animate.css/" rel="nofollow">animate.css</a> before the button's value has changed, which will trigger a fade away animation.  Then I would like to have the animation complete and update each grade.  Finally, I would like to remove the class for the first animation (fadeOut) and add another class (fadeIn).  When the fadeIn animation is finished, I would like to remove the fadeIn class so future animations (increment and decrement button presses) load correctly.</p>
  
  <p>There is also an angular way to delay each transition (.ng-enter-stagger and .ng-leave-stagger), which I would like to utilize, but I can't even get my directive to see changes on a student's grade. </p>
  
  <p>I've tried passing the class object to my directive using :</p>
  
  <pre><code>scope: {
              class: '='
          },
  </code></pre>
  
  <p>so that the directive has access to $watch changes within the student objects, but without much luck.  I've tried using $observe as well, but with no luck either.</p>
  
  <p>Does anybody know what I'm doing wrong?  Should I be using postLink functions? My JSFiddle is <a href="http://jsfiddle.net/Shawful/Yxjr3/4/" rel="nofollow">here</a>.</p>
  
  <p>AHH! This should be easy :S</p>