perf(ngStyleDirective): use $watchCollection

Since we are simply watching a flat object collection it is more performant
to use $watchCollection than a deepWatch...

BREAKING CHANGE:

Previously the use of deep watch by ng-style would trigger styles to be
re-applied when nested state changed. Now only changes to direct
properties of the watched object will trigger changes.

Closes #15947

Author: PatrickJS

src/ng/directive/ngStyle.js

@@ -52,10 +52,10 @@
    </example>
  */
 var ngStyleDirective = ngDirective(function(scope, element, attr) {
-  scope.$watch(attr.ngStyle, function ngStyleWatchAction(newStyles, oldStyles) {
+  scope.$watchCollection(attr.ngStyle, function ngStyleWatchAction(newStyles, oldStyles) {
     if (oldStyles && (newStyles !== oldStyles)) {
       forEach(oldStyles, function(val, style) { element.css(style, '');});
     }
     if (newStyles) element.css(newStyles);
-  }, true);
+  });
 });

test/ng/directive/ngStyleSpec.js

@@ -23,6 +23,21 @@ describe('ngStyle', function() {
   }));
 
 
+  it('should not deep watch objects', inject(function($rootScope, $compile) {
+    element = $compile('<div ng-style="{height: heightObj}"></div>')($rootScope);
+    $rootScope.$digest();
+    expect(parseInt(element.css('height') + 0, 10)).toEqual(0); // height could be '' or '0px'
+    $rootScope.heightObj = {toString: function() { return '40px'; }};
+    $rootScope.$digest();
+    expect(element.css('height')).toBe('40px');
+
+    element.css('height', '10px');
+    $rootScope.heightObj.otherProp = 123;
+    $rootScope.$digest();
+    expect(element.css('height')).toBe('10px');
+  }));
+
+
   it('should support lazy one-time binding for object literals', inject(function($rootScope, $compile) {
     element = $compile('<div ng-style="::{height: heightStr}"></div>')($rootScope);
     $rootScope.$digest();