title: ng-class will not trigger on custom directive
body: <p>I am currently developing a <a href="https://github.com/Elzair/angular-slide-menu" rel="noreferrer">slide menu directive</a> for AngularJS. The javascript consists of three types of directives: the directives for each type of sliding menu (for brevity's sake I only included the left sliding menu), one wrapper directive for the rest of the screen, <strong>asmWrapper</strong>, and one control button directive, <strong>asmControl</strong>. Currently, all of these directives are using a service, <strong>asmService</strong> to communicate.</p>
  
  <p>When the user clicks an asmControl, that directive's controller calls a method on asmService that determines which menu has been triggered and emits an 'asmEvent' on the $rootScope. <strong>asmSlidingMenu</strong>'s controller will catch that event and update the active variable in its scope, but the DOM element's CSS class remains unchanged. </p>
  
  <p>I assume the <strong>ng-class</strong> is not being set. How do I fix this?</p>
  
  <p>I have included the code for the asmSlidingMenu directive below. To see a more complete example, view the <a href="http://plnkr.co/edit/zN68MpEx6xZrevo3HH28" rel="noreferrer">Plunker</a> I made.</p>
  
  <pre><code>slideMenu.directive('asmSlideLeft', ['$rootScope', 'asmService', 
  function($rootScope, asmService) {
    return {
        restrict: 'AEC'
      , scope: {}
      , controller: function($scope) {
          $rootScope.$on('asmEvent', function(event, prop) {
            console.log('Intercepted: ' + asmService.asmStates.slideLeft.active);
            $scope.active = asmService.asmStates.slideLeft.active;
          });
        }
      , compile: function(element, attrs) {
          attrs.$set('class', 'asm asm-horizontal asm-left');
          attrs.$set('data-ng-class', '{"asm-left-open: active"}');
          return {
              pre: function preLink(scope, iElement, iAttrs) {}
            , post: function postLink(scope, iElement, iAttrs) {}
          }
        }
    }
  }]);
  </code></pre>