Open kendo window dynamically from angular

I am trying to open a kendo window dynamically from angular. By dynamically, I mean adding a new <div> for a window to the html from an angular function and then open the window. I do not want to include this <div> directly inside the html because I want to create a varying number of windows. The function in the controller looks like this

$scope.showCalendar = function() {
   var element = "<div kendo-window='calendar' k-visible='false'> <div kendo-calendar></div> </div>";
   $("#calendarDiv").append(element);
   $scope.calendar.open();
};

The window does not appear. If I include this div directly inside the html file, the function call $scope.calendar.open() works okay, of course.