fix(jsonTree): detect deep model changes via events

Sometimes when navigating around the scopeTree the jsonTree didn't
update.
I believe this was caused by the $watch on the model in jsonTree being
passed the objectEquality flag.
This results in the use of the angular.equal function to detect if the
model has changed.
This function ignores any properties that start with a $...
Thus when only the $properties were different across multiple models,
$watch didn't trigger.
The solution:
a) Use a watch with reference equality to detect when the user selects a
different scope to inspect.
b) Listen for model:change events to detect when the model has been
updated from ngHint.

Author: gary-b

panel/components/json-tree/json-tree.js

@@ -51,17 +51,26 @@ function batJsonTreeDirective() {
 
         return;
       }
-      Object.
-        keys(val).
-        filter(function (key) {
-          return key.substr(0, 2) !== '$$';
-        }).
-        sort(byPathDepth).
-        forEach(function (key) {
-          buildDom(val[key], key);
-        });
-    }, true);
+      renderModel(val)
+    });
 
+    scope.$on('model:change', function(ev, data){
+      if(data.id && scope.batModel && scope.batModel[''] && (data.id === scope.batModel[''].$id)){
+        renderModel(scope.batModel);
+      }
+    });
+
+    function renderModel(val){
+      Object.
+          keys(val).
+          filter(function (key) {
+            return key.substr(0, 2) !== '$$';
+          }).
+          sort(byPathDepth).
+          forEach(function (key) {
+            buildDom(val[key], key);
+          });
+    }
 
     function buildDom(object, depth) {
       branches[depth].html('');

panel/components/json-tree/json-tree.spec.js

@@ -22,6 +22,47 @@ describe('batJsonTree', function () {
     expect(element.text()).toBe('$id: 1');
   });
 
+  describe('model:change event', function() {
+    it('should render model again when parameter has same id as model', function () {
+      $rootScope.data = {
+        '': {'$id': 1}
+      };
+      compileTree();
+      $rootScope.data = {
+        '': {'$id': 2}
+      };
+      $rootScope.$broadcast('model:change', { id: 2 });
+      $rootScope.$apply();
+      expect(element.text()).toBe('$id: 2');
+    });
+
+    it('should not render model again when parameter has different id than model', function () {
+      $rootScope.data = {
+        '': {'$id': 1}
+      };
+      compileTree();
+      $rootScope.$broadcast('model:change', { id: 2 });
+      $rootScope.$apply();
+      expect(element.text()).toBe('$id: 1');
+    });
+
+    it('should not throw error if model undefined', function () {
+      $rootScope.data = undefined;
+      compileTree();
+      expect(function () {
+        $rootScope.$broadcast('model:change', { id: 2 });
+      }).not.toThrow();
+    });
+
+    it("should not throw error if '' property not set on model", function () {
+      $rootScope.data = {};
+      compileTree();
+      expect(function () {
+        $rootScope.$broadcast('model:change', { id: 2 });
+      }).not.toThrow();
+    });
+  });
+
   function compileTree() {
     element = compile('<bat-json-tree bat-model="data"></bat-json-tree>');
     $rootScope.$apply();