title: Using $popover service in Angular with Fullcalendar
body: <p>I have a calendar setup in Angular using FullCalendar. I am now trying to get a popover to show up using javascript only and without any DOM manipulation. I am trying to use the $popover service provided by Angularstrap. </p>
  
  <p>In the options of the calendar I do the following: </p>
  
  <p>eventMouseover: $scope.PopOnEventHover</p>
  
  <p>And the PopOnEventHover is what I am trying to use make the popover appear: </p>
  
  <pre><code>$scope.alertOnEventHover = function(event, jsEvent, view, $popover, element){
      var myPopover = $popover(element, {
          title: 'My Title',
          content:'My Content'
      });
      myPopover.show();
  };
  </code></pre>
  
  <p>The HTML which displays the calendar looks like this: </p>
  
  <pre><code>&lt;h1&gt;Scheduled Content&lt;/h1&gt;
  View:
  &lt;a ng-click="changeView('agendaDay', myCalendar)"&gt;DAY&lt;/a&gt; |
  &lt;a ng-click="changeView('agendaWeek', myCalendar)"&gt;WEEK&lt;/a&gt; |
  &lt;a ng-click="changeView('month', myCalendar)"&gt;MONTH&lt;/a&gt;
  &lt;div ui-calendar="options.calendar"
       calendar="myCalendar"
       ng-model="eventSources"
       bs-popover&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Right now I get an error in the console which has a problem with the function I am using to display the popover.</p>
  
  <p>I would appreciate any help or tips. Thanks  </p>