listen for changes in angular land and propagate that back to react

public/app/features/datasources/settings/PluginSettings.tsx

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import React, { PureComponent } from 'react';
 import { DataSource, Plugin } from 'app/types/';
 import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
@@ -23,13 +24,24 @@ export class PluginSettings extends PureComponent<Props> {
     const scopeProps = {
       ctrl: {
         datasourceMeta: dataSourceMeta,
-        current: dataSource,
+        current: _.cloneDeep(dataSource),
       },
+      onModelChanged: this.onModelChanged,
     };
 
     this.component = loader.load(this.element, scopeProps, template);
   }
 
+  componentWillUnmount() {
+    if (this.component) {
+      this.component.destroy();
+    }
+  }
+
+  onModelChanged(dataSource: DataSource) {
+    console.log(dataSource);
+  }
+
   render() {
     return <div ref={element => (this.element = element)} />;
   }

public/app/features/plugins/plugin_component.ts

@@ -149,6 +149,14 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
             return { notFound: true };
           }
 
+          scope.$watch(
+            'ctrl.current',
+            () => {
+              scope.onModelChanged(scope.ctrl.current);
+            },
+            true
+          );
+
           return {
             baseUrl: dsMeta.baseUrl,
             name: 'ds-config-' + dsMeta.id,