fix(directive): reapply ng-class when interpolated class attribute changes

Closes angular#1016

Author: maxmart

src/ng/compile.js

@@ -999,7 +999,9 @@ function $CompileProvider($provide) {
           // we define observers array only for interpolated attrs
           // and ignore observers for non interpolated attrs to save some memory
           attr.$$observers[name] = [];
-          attr[name] = undefined;
+          if (name !== 'class') {
+        	  attr[name] = undefined;
+          }
           scope.$watch(interpolateFn, function(value) {
             attr.$set(name, value);
           });

src/ng/directive/ngClass.js

@@ -2,19 +2,35 @@
 
 function classDirective(name, selector) {
   name = 'ngClass' + name;
-  return ngDirective(function(scope, element, attr) {
-    scope.$watch(attr[name], function(newVal, oldVal) {
-      if (selector === true || scope.$index % 2 === selector) {
-        if (oldVal && (newVal !== oldVal)) {
-           if (isObject(oldVal) && !isArray(oldVal))
-             oldVal = map(oldVal, function(v, k) { if (v) return k });
-           element.removeClass(isArray(oldVal) ? oldVal.join(' ') : oldVal);
-         }
-         if (isObject(newVal) && !isArray(newVal))
+  return ['$interpolate', function($interpolate) {
+    return function(scope, element, attr) {
+      // Reusable function for re-applying the ngClass
+      function reapply(newVal, oldVal) {
+        if (selector === true || scope.$index % 2 === selector) {
+          if (oldVal && (newVal !== oldVal)) {
+            if (isObject(oldVal) && !isArray(oldVal))
+              oldVal = map(oldVal, function(v, k) { if (v) return k });
+            element.removeClass(isArray(oldVal) ? oldVal.join(' ') : oldVal);
+          }
+          if (isObject(newVal) && !isArray(newVal))
             newVal = map(newVal, function(v, k) { if (v) return k });
-         if (newVal) element.addClass(isArray(newVal) ? newVal.join(' ') : newVal);      }
-    }, true);
-  });
+          if (newVal) element.addClass(isArray(newVal) ? newVal.join(' ') : newVal);
+        }
+      };
+      scope.$watch(attr[name], reapply, true);
+      
+      // Watch class attribute for changes
+      if (attr['class']) {
+        var interpolateFn = $interpolate(attr['class'], true);
+        scope.$watch(interpolateFn, function(newClass, oldClass) {
+          // Reapply ngClass
+          var ngClass = scope.$eval(attr[name]);
+          reapply(ngClass, ngClass);
+        });
+      }
+
+    };
+  }];
 }
 
 /**

test/ng/directive/ngClassSpec.js

@@ -201,4 +201,36 @@ describe('ngClass', function() {
     expect(e2.hasClass('C')).toBeFalsy();
     expect(e2.hasClass('D')).toBeFalsy();
   }));
+  
+  it('should reapply ngClass when interpolated class attribute changes', inject(function($rootScope, $compile) {
+    element = $compile('<div class="one {{cls}} three" ng-class="{four: four}"></div>')($rootScope);
+
+    $rootScope.$apply(function() {
+      $rootScope.cls = "two";
+      $rootScope.four = true;
+    });
+    expect(element).toHaveClass('one');
+    expect(element).toHaveClass('two'); // interpolated
+    expect(element).toHaveClass('three');
+    expect(element).toHaveClass('four');
+
+    $rootScope.$apply(function() {
+      $rootScope.cls = "too";
+    });
+    expect(element).toHaveClass('one');
+    expect(element).toHaveClass('too'); // interpolated
+    expect(element).toHaveClass('three');
+    expect(element).toHaveClass('four'); // should still be there
+    expect(element.hasClass('two')).toBeFalsy();
+
+    $rootScope.$apply(function() {
+      $rootScope.cls = "to";
+    });
+    expect(element).toHaveClass('one');
+    expect(element).toHaveClass('to'); // interpolated
+    expect(element).toHaveClass('three');
+    expect(element).toHaveClass('four'); // should still be there
+    expect(element.hasClass('two')).toBeFalsy();
+    expect(element.hasClass('too')).toBeFalsy();
+  }));
 });