Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<div ng-app='myApp'>
<div ng-controller="Ctrl">
    <span>
        <div addRemoveClass>test</div>
        <button ng-click="addClass()">addClass</button>
        <button ng-click="removeClass()">removeClass</button>
    </span>
</div>
</div>

CSS

.popupOn{
    background-color: #339933;
}

JavaScript

var myApp = angular.module('myApp',[]);
myApp.controller("Ctrl", function($scope){
    $scope.addClass = function(){
        $('div[addRemoveClass]').addClass('popupOn');
    }
    $scope.removeClass = function(){
        $('div[addRemoveClass]').removeClass('popupOn');
    }
});

myApp.directive('addRemoveClass', [function(){
    return{
        restrict: 'A',
        link: function(scope, element, attrs, controller){
            scope.$watch(function() {return element.attr('class'); }, function(newValue){
                debugger;
                if (element.hasClass('popupOn')) {
                  element.parent().addClass(classMap[key]);
                } else {
                  element.parent().removeClass(classMap[key]);
                }
            });
        }
    }
}]);