Ng-class не будет запускаться по настраиваемой директиве

В настоящее время я разрабатываю директиву слайдов для AngularJS. Javascript состоит из трех типов директив: директивы для каждого типа скользящего меню (для краткости я использовал только левое скользящее меню), одну директиву обертки для остальной части экрана, asmWrapper и одна управляющая кнопка, asmControl. В настоящее время все эти директивы используют службу asmService для связи.

Когда пользователь нажимает на asmControl, этот директивный контроллер вызывает метод asmService, который определяет, какое меню было запущено, и выдает "asmEvent" на $rootScope. Контроллер asmSlidingMenu поймает это событие и обновит активную переменную в своей области, но класс CSS класса DOM останется без изменений.

Я предполагаю, что ng-class не установлен. Как это исправить?

Я включил код для директивы asmSlidingMenu ниже. Чтобы увидеть более полный пример, просмотрите Plunker, который я сделал.

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) {}
        }
      }
  }
}]);