title: Directive : $observe, class attribute change caught only once
body: <p>I have a directive changing the style of a div and would like to be notified by $observe each time the class of the element changes. The problem is that it happens at directive creation but not after.
  Here is the code and a <a href="http://jsfiddle.net/unludo/2h97m/21/" rel="nofollow">fiddle</a></p>
  
  <pre><code>&lt;div ng-app="testObserve"&gt;
      &lt;div ng-controller="Ctrl2"&gt; 
          &lt;span class="rouge" ng-click="toggleClass()" my-test&gt;Coucou&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  angular.module('testObserve', [])
      .controller('Ctrl2', function ($scope) {})
      .directive('myTest', function () {
  
      function link(scope, element, attrs) {
  
          scope.toggleClass = function () {
              if (element.hasClass('rouge')) {
                  element.removeClass('rouge');
              } else {
                  element.addClass('rouge');
              }
              console.log( 'I become ' + element[0].outerHTML );
          };
  
          attrs.$observe('class', function (val) {
              console.log('class has changed' + val);
              debugger;
          });
      }
  
      return {
          link: link
      };
  });
  </code></pre>
  
  <p>Is this normal behavior?</p>
  
  <hr>
  
  <p>Ok I found, it has to be ng-class instead of class both in the html and the js code (it is in the documentation).</p>
  
  <p>The fixed js is <a href="http://jsfiddle.net/unludo/jc6MS/1/" rel="nofollow">here</a>.</p>
  
  <p>So I change a bit the question : if another js changes the class, but not ng-class, how may I observe that ?</p>
  
  <hr>
  
  <p>To answer to @koolunix's question (and yes unix is kool :) ) about if js is in the angular scope, actually I want to use angular bootsrap dropdown and trigger something when the drop down opens or closes. </p>
  
  <p>Strangely, although it is an angular module, it uses class instead of ng-class. So I did not find a way to catch that information from the outside as it only appears as the appearance of the 'open' class. </p>
  
  <p>I think the submitted answer works, but I still need to try.</p>
  
  <p>As a work around I duplicated the ui-bootstrap directive and added what I needed inside.</p>
  
  <p>Thanks!</p>