i found this piece of code
HTML:
<script type="text/ng-template" id="custom-footer">
<div>
<table cellspacing="0" cellpadding="0" ng-controller="SearchController"
style="border:solid 1px black; font-family:verdana; font-size:12px;">
<thead>
<tr style="background-color:lightgrey;">
<th style="width:20px;" ng-click="changeTime(0)">Day</th>
...
The Directive:
(function () {
var mod = angular.module('matrixarCalendar', []);
mod.directive('datepicker', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, elem, attrs, ngModelCtrl) {
var updateModel = function (dateText) {
// call $apply to bring stuff to angular model
scope.$apply(function () {
ngModelCtrl.$setViewValue(dateText);
});
};
scope.updateDatePicker = function () {
$.datepicker.dpDiv.append($('#custom-footer').contents().text());
};
var options = {
dateFormat: 'dd/mm/yy',
numberOfMonths: 2,
autoSize: true,
autoclose: true,
minDate: new Date(),
onSelect: function (dateText) {
updateModel(dateText);
}
};
elem.datepicker(options);
}
};
});
}());
The Controller:
angular.module('matrixarSearch', [
'mm.foundation',
'matrixarAutocomplete',
'matrixarCalendar'
]).controller('SearchController', function ($scope, $translate) {
$scope.time='';
$scope.changeTime = function(val){
$scope.time = val;
console.log($scope);
};
...
However, I'm facing an issue where the scope is not initialized with the correct value when I click on my header. Why could this be happening?