Angular click not passing variables though - angularjs

Question

I have been struggling with an angular-js problem, I am unable to figure out why my ng-click is not sending through any values to the jquery function that is hooked up to it. It triggers the jquery fine, but when it comes into the jquery no variables comes with it!
So some information first of all:
I am using angular-bootstrap-calendar Link to Project (This is what I am having issues with)
Using angular-bootstrap-calendar I have implemented a custom day template using instructions from github Instruction Page
The ng-click triggers my code correctly though no information is passed from the click to my customer event.
<span data-cal-date
ng-click="vm.calendarCtrl.dateClicked(day.date)"
class="pointer btn"
id="openDay"
ng-bind="day.dayLabel">
</span>
<mwl-calendar events="vm.events"
view="vm.calendarView"
view-title="vm.calendarTitle"
view-date="vm.viewDate"
on-event-click="vm.eventClicked(calendarEvent)"
on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
on-edit-event-click="vm.eventEdited(calendarEvent)"
on-delete-event-click="vm.eventDeleted(calendarEvent)"
cell-is-open="vm.isCellOpen"
day-view-start="06:00"
day-view-end="22:00"
day-view-split="30"
cell-modifier="vm.modifyCell(calendarCell)"
on-view-change-click="vm.dateClicked(day)">
</mwl-calendar>
vm.dateClicked = function (day) {
alert("Do Something");
};
Results
day = undefined
Versions:
"angular-bootstrap-calendar": "0.19.3",
"angular": "1.5.0",
"font-awesome": "4.5.0",
"moment": "2.12.0",
"interact.js": "1.2.6",
"angular-bootstrap": "1.2.4",
"angular-touch": "1.5.0",
"angular-animate": "1.5.0",
Full Code Examples
ManRoster.cshtml
<div class="col-lg-12">
<div class="col-lg-12 panel panel-default">
<div ng-app="UserCal" class="textfix">
<script id="calendarWeekView.html" type="text/ng-template">
<div class="cal-week-box" ng-class="{'cal-day-box': vm.showTimes}">
<div class="cal-row-fluid cal-row-head">
<div class="cal-cell1"
ng-repeat="day in vm.view.days track by $index"
ng-class="{
'cal-day-weekend': day.isWeekend,
'cal-day-past': day.isPast,
'cal-day-today': day.isToday,
'cal-day-future': day.isFuture}"
mwl-element-dimensions="vm.dayColumnDimensions"
mwl-droppable
on-drop="vm.eventDropped(dropData.event, day.date)">
<div id="resourcescount">
{{ day.events.length }}
</div>
<span ng-bind="day.weekDayLabel">
</span>
<br>
<small>
<span data-cal-date
ng-click="vm.calendarCtrl.dateClicked(day.date)"
class="pointer btn"
id="openDay"
ng-bind="day.dayLabel">
</span>
</small>
</div>
</div>
<div class="cal-day-panel clearfix" ng-style="{height: vm.showTimes ? (vm.dayViewHeight + 'px') : 'auto'}">
<mwl-calendar-hour-list day-view-start="vm.dayViewStart"
day-view-end="vm.dayViewEnd"
day-view-split="vm.dayViewSplit"
day-width="vm.dayColumnDimensions.width"
view-date="vm.viewDate"
on-timespan-click="false"
ng-if="vm.showTimes">
</mwl-calendar-hour-list>
<div class="row">
<div class="col-xs-12">
<div class="cal-row-fluid"
ng-repeat="event in vm.view.events track by event.$id">
<div ng-class="'cal-cell' + (vm.showTimes ? 1 : event.daySpan) + (vm.showTimes ? '' : ' cal-offset' + event.dayOffset) + ' day-highlight dh-event-' + event.type + ' ' + event.cssClass"
ng-style="{
top: vm.showTimes ? ((event.top + 2) + 'px') : 'auto',
position: vm.showTimes ? 'absolute' : 'inherit',
width: vm.showTimes ? (vm.dayColumnDimensions.width + 'px') : '',
left: vm.showTimes ? (vm.dayColumnDimensions.width * event.dayOffset) + 15 + 'px' : ''
}"
data-event-class
mwl-draggable="event.draggable === true"
axis="vm.showTimes ? 'xy' : 'x'"
snap-grid="vm.showTimes ? {x: vm.dayColumnDimensions.width, y: 30} : {x: vm.dayColumnDimensions.width}"
on-drag="vm.tempTimeChanged(event, y)"
on-drag-end="vm.weekDragged(event, x, y)"
mwl-resizable="event.resizable === true && event.endsAt && !vm.showTimes"
resize-edges="{left: true, right: true}"
on-resize-end="vm.weekResized(event, edge, x)">
Shift
<strong ng-bind="(event.tempStartsAt || event.startsAt) | calendarDate:'time':true" ng-show="vm.showTimes"></strong>
<a href="javascript:;"
ng-click="vm.onEventClick({calendarEvent: event})"
class="event-item"
ng-bind-html="vm.$sce.trustAsHtml(event.title)"
uib-tooltip-html="event.title | calendarTrustAsHtml"
tooltip-placement="left"
tooltip-append-to-body="true">
</a>
</div>
</div>
</div>
</div>
<div id="ResourceInfo">
This will be the select panel
</div>
</div>
</div>
</script>
<!-- This is the end of the testing script -->
<div ng-controller="Cal as vm">
<h2 class="text-center">{{ vm.calendarTitle }}</h2>
<div class="row">
<div class="col-md-6 text-center">
<div class="btn-group">
<button class="btn btn-primary"
mwl-date-modifier
date="vm.viewDate"
decrement="vm.calendarView">
Previous
</button>
<button class="btn btn-default"
mwl-date-modifier
date="vm.viewDate"
set-to-today>
Today
</button>
<button class="btn btn-primary"
mwl-date-modifier
date="vm.viewDate"
increment="vm.calendarView">
Next
</button>
</div>
</div>
<br class="visible-xs visible-sm">
<div class="col-md-6 text-center">
<div class="btn-group">
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'year'">Year</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'month'">Month</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'week'">Week</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'day'">Day</label>
</div>
</div>
</div>
<br>
<mwl-calendar events="vm.events"
view="vm.calendarView"
view-title="vm.calendarTitle"
view-date="vm.viewDate"
on-event-click="vm.eventClicked(calendarEvent)"
on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
on-edit-event-click="vm.eventEdited(calendarEvent)"
on-delete-event-click="vm.eventDeleted(calendarEvent)"
cell-is-open="vm.isCellOpen"
day-view-start="06:00"
day-view-end="22:00"
day-view-split="30"
cell-modifier="vm.modifyCell(calendarCell)"
on-view-change-click="vm.dateClicked(date)">
</mwl-calendar>
<br />
</div>
</div>
</div>
</div>
ManRoster.js
angular.module('UserCal', ['mwl.calendar', 'ui.bootstrap', 'ngAnimate'])
.controller('Cal', populateCal);
function populateCal($http, calendarConfig) {
var resultset = [];
var userID = 1;
var vm = this;
calendarConfig.templates.calendarWeekView = 'calendarWeekView.html';
vm.calendarView = 'week';
vm.viewDate = new Date();
vm.events = [];
vm.isCellOpen = true;
vm.toggle = function ($event, field, event) {
$event.preventDefault();
$event.stopPropagation();
event[field] = !event[field];
};
vm.dateClicked = function (day) {
alert("Do Something");
};
}
Plunker As Requested

Answer 1

Let's try this one. I've created a custom directive to capture click events, it seems to be capturing the date consistently for me.
http://plnkr.co/edit/1XlQkgj5eJeuy728bEwI?p=preview
Add a directive (i just called it testDirective):
angular.module('UserCal', ['mwl.calendar', 'ui.bootstrap', 'ngAnimate'])
.controller('Cal', populateCal)
.directive('testDirective', testDirective);
emphasized text
function testDirective() {
return {
link: function(scope,elem,attrs) {
angular.element(elem).on('click', function (evt) {
alert('You clicked on: ' + scope.vm.viewDate)
});
}
};
}
Add it to the mwl-calendar element:
<mwl-calendar test-directive events="vm.events"
Initial Idea:
Alright, I think I have it now. In index.html, change
on-view-change-click="vm.dateClicked(date)"
to
on-view-change-click="vm.dateClicked(this.vm.viewDate)"
It should look like this:
<mwl-calendar
events="vm.events"
view="vm.calendarView"
view-title="vm.calendarTitle"
view-date="vm.viewDate"
on-event-click="vm.eventClicked(calendarEvent)"
on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
on-edit-event-click="vm.eventEdited(calendarEvent)"
on-delete-event-click="vm.eventDeleted(calendarEvent)"
cell-is-open="vm.isCellOpen"
day-view-start="06:00"
day-view-end="22:00"
day-view-split="30"
cell-modifier="vm.modifyCell(calendarCell)"
on-view-change-click="vm.dateClicked(this.vm.viewDate)">
</mwl-calendar>
Plunker: http://plnkr.co/edit/kKpjoCFvaR6xBjQL1bT6?p=preview