mwl-calendar doesn't work with a directive - angularjs

Question

I create a directive in angularjs to change the text in my angular month view but when I switch my view from week to go back to month it doesn't show my data.
<script id="customMonthCell.html" type="text/ng-template">
<div size-elt class="cal-month-day {{day.cssClass}}">
<span
class="pull-right"
data-cal-date
ng-click="vm.calendarCtrl.dateClicked(day.date)"
ng-bind="day.label">
</span>
<small style="position: absolute; bottom: 10px; left: 5px">{{monthCalendarDayDivWidth}}
<div style="display:inline-block;margin-bottom: 5px;" ng-repeat="(petitTitle, events) in day.groups track by petitTitle">
<span ng-if="events.length > 1 && monthCalendarDayDivWidth > 130">
{{events[0].description}}
</span>
<span ng-if="events.length > 1 && monthCalendarDayDivWidth <= 130">
{{littleTitle}}
</span>
</div>
</small>
</div>
</script>
tabs.directive('sizeElt', ['$window', function ($window) {
return {
link: link,
restrict: 'A'
};
function link(scope, element, attrs) {
angular.element($window).bind('resize', function () {
scope.windowWidth = $window.innerWidth;
scope.monthCalendarDayDivWidth = element[0].offsetWidth
scope.$apply();
});
angular.element($window).bind('load', function () {
scope.windowWidth = $window.innerWidth;
scope.monthCalendarDayDivWidth = element[0].offsetWidth
scope.$apply();
});
}
}]);
This is when I load my page
this is when I click to week view and come back to month view
It's like monthCalendarDayDivWidth is not defined but if I force it when I switch the view it still doesn't work
$scope.monthCalendarDayDivWidth = $scope.windowWidth > 1080 ? 140 : 110

Answer 1

I modify my directive so when I switch the view in my calendar I the data can be visible
tabs.directive('sizeElt', ['$window', function ($window) {
return {
link: link,
restrict: 'A'
};
function link(scope, element, attrs) {
angular.element($window).bind('resize', function () {
scope.windowWidth = $window.innerWidth;
scope.monthCalendarDayDivWidth = element[0].offsetWidth
scope.$apply();
});
if (element.offsetWidth !== 0 || element.offsetHeight !== 0) {
setTimeout(function () {
scope.windowWidth = $window.innerWidth;
scope.monthCalendarDayDivWidth = element[0].offsetWidth
scope.$apply();
}, 0);
}
}
}]);