React component inside AngularJS in Kibana

HTML template

```
  <li class="watcher-wizard-condition-dd">
    <my-popover></my-popover>
```

JS code

```
/* global angular */
import { uiModules } from 'ui/modules';
import 'bootstrap/dist/js/bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import 'angular-touch';
import 'angular-ui-bootstrap';
import 'chart.js';
import 'angular-chart.js';
import Filters from './filters';
import Pages from './pages';
import Services from './services';
import Directives from './directives';
import Components from './components';

import React, {
  Component,
} from 'react';

import { render, unmountComponentAtNode } from 'react-dom';

import {
  EuiButton,
  EuiFormRow,
  EuiPopover,
  EuiSwitch,
} from '@elastic/eui';

import './constants';

const app = uiModules.get('apps/sentinl', [
  'react',
  'ui.bootstrap',
  'chart.js',
  Filters.name,
  Pages.name,
  Services.name,
  Directives.name,
  Components.name,
]);

app.config(function (ChartJsProvider) {
  'ngInject';
  // Configure all charts
  ChartJsProvider.setOptions({
    chartColors: ['#0074D9', '#FF4136'],
    responsive: true,
  });
});

// var HelloComponent = React.createClass({
//   propTypes: {
//     fname : React.PropTypes.string.isRequired,
//     lname : React.PropTypes.string.isRequired
//   },
//   render: function() {
//     return <span>Hello {this.props.fname} {this.props.lname}</span>;
//   }
// });

class MyPopover extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isPopoverOpen: false,
    };
  }

  onButtonClick() {
    this.setState({
      isPopoverOpen: !this.state.isPopoverOpen,
    });
  }

  closePopover() {
    this.setState({
      isPopoverOpen: false,
    });
  }

  render() {
    const button = (
      <EuiButton
        iconType="arrowDown"
        iconSide="right"
        onClick={this.onButtonClick.bind(this)}
      >
        Show popover
      </EuiButton>
    );

    return (
      <EuiPopover
        id="popover"
        button={button}
        isOpen={this.state.isPopoverOpen}
        closePopover={this.closePopover.bind(this)}
      >
        <div style={{ width: '300px' }}>Popover content that&rsquo;s wider than the default width</div>
      </EuiPopover>
    );
  }
}

// app.value('HelloComponent', HelloComponent);
// app.value('MyPopover', MyPopover);

app.directive('myPopover', function() {
  return {
    restrict: 'E',
    controller: function ($scope, $element) {
      debugger;
      render(
        <MyPopover></MyPopover>,
        $element[0]        
      );

      $scope.$on('$destroy', () => unmountComponentAtNode($element[0]));
    }
  };
});

export { app };
```