Using $popover service in Angular with Fullcalendar

Question

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.

In the options of the calendar I do the following:

eventMouseover: $scope.PopOnEventHover

And the PopOnEventHover is what I am trying to use make the popover appear:

$scope.alertOnEventHover = function(event, jsEvent, view, $popover, element){
    var myPopover = $popover(element, {
        title: 'My Title',
        content:'My Content'
    });
    myPopover.show();
};

The HTML which displays the calendar looks like this:

<h1>Scheduled Content</h1>
View:
<a ng-click="changeView('agendaDay', myCalendar)">DAY</a> |
<a ng-click="changeView('agendaWeek', myCalendar)">WEEK</a> |
<a ng-click="changeView('month', myCalendar)">MONTH</a>
<div ui-calendar="options.calendar"
     calendar="myCalendar"
     ng-model="eventSources"
     bs-popover></div>

Right now I get an error in the console which has a problem with the function I am using to display the popover.

I would appreciate any help or tips. Thanks

Answer 1

Replace

var myPopover = $popover(element, {
        title: 'My Title',
        content:'My Content'
    });
    myPopover.show();

with

var myPopover = $popover(element, {
        title: 'My Title',
        content:'My Content',
        show: true
    });

And make sure you have $popover service is injected and element is exist.