title: How to open ui-bootstrap dropdown on clicking over angular highcharts
body: <p>This is the config object that I am passing to highchart directive and getting click event on clicking the highchart column, now on clicking the any column of highchart I want to open the dropdown there:  </p>
  
  <pre><code>options: {
                          chart: {
                              type: 'column'
                          },
  
                      },
                      xAxis: {
                          categories: ['Oct 2015', 'Nov 2015', 'Dec 2015', 'Jan 2016', 'Feb 2016', 'March 2016']
                      },
                      yAxis: [{ // Primary yAxis
                          title: {`enter code here`
                              text: 'Volume'
                          }
                      }, { // Secondary yAxis
                          title: {
                              text: 'Sentiment'
                          },
                          opposite: true
                      }],
                      series: [{
                          name: 'Volume - Same period last year',
                          type: 'column',
                          data: [1410, 610, 400, 785, 450, 400],
                          point: {
                              events: {
                                  click: function(e) {
                                      vm.showDropdown = true;
                                      vm.dropDownStyle.top = e.clientY;
                                      vm.dropDownStyle.left = e.clientX;
                                      console.log('event', e);
                                      $scope.$apply();
                                  }
                              }
                          },
                          color: '#2CAFC7'
                      },  {
                          name: 'Volume - Last 180 days ',
                          type: 'column',
                          data: [1210, 710, 700, 485, 410, 350],
                          point: {
                              events: {
                                  click: function(e) { // here I am getting click event
                                      console.log('clicked');
                                      vm.showDropdown = true;
                                      vm.dropDownStyle.top = e.clientY;
                                      vm.dropDownStyle.left = e.clientX;
                                      console.log('event', e);
                                      $scope.$apply();
                                  }
                              }
                          },
                          color: '#4C79BF'
                      }],
  
                      func: function (chart) {
                          //setup some logic for the chart
                          $timeout(function () {
                              chart.reflow();
                          }, 1000);
                      }
                  }
  </code></pre>