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">
    <div>
        <div id="patient" add-remove-class>test</div>
        <button ng-click="addClass()">addClass</button>
        <button ng-click="removeClass()">removeClass</button>
    </div>
</div>
</div>

CSS

.popupOn{
    background-color: #339933;
}
.has-error{
    border: 1px solid #ccc;
}

JavaScript

var myApp = angular.module('myApp',[]);
myApp.controller("Ctrl", function($scope){
    $scope.addClass = function(){
        angular.element(document.querySelector('#patient')).addClass('popupOn');
    }
    $scope.removeClass = function(){
        angular.element(document.querySelector('#patient')).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('has-error');
                } else {
                  element.parent().removeClass('has-error');
                }
            });
        }
    }
}]);