Add Button to Time Header

I was able to determine how to add a button to the Time Header simply by setting the html like so:

onBeforeTimeHeaderRender: function (args) {
if (args.header.level === 1) {
args.header.html = args.header.html + "<br/><a onclick='bookAll();'>Book</a>";
}
},

However, while the above works (the bookAll() function is called), I'm using angular and would like the following to work (which it doesn't):

onBeforeTimeHeaderRender: function (args) {
if (args.header.level === 1) {
args.header.html = args.header.html + "<br/><a ng-click='vm.bookAll();'>Book</a>";
}
},

Is there any way to trigger an angular method within my angular controller on the button click?

This doesn't work because the HTML doesn't get compiled using Angular. It looks like it might be possible to support it in the future it looks like it would also add a lot of overhead (the time header can have a lot of cells which need to be updated every time).

If you add the button as an active area instead you'll be able to specify a custom click handler using DayPilot (and reach other controller methods from there):

onBeforeTimeHeaderRender: function (args) { 
  if (args.header.level === 1) { 
    args.header.areas = []; 
    args.header.areas.push({ 
      left: 0, top: 0, html: "Book", style: "text-decoration: underline", onClick: function(args) { /* ... your code here ... */ }
    }); 
  }
} 

Thank you for that, it works like a charm. I ended up with this:

onBeforeTimeHeaderRender: function (args) {
if (args.header.level === 1) {
args.header.html = args.header.start.toString("htt").toLowerCase(); // Format time display
args.header.areas = [];
args.header.areas.push({
left: 6, html: "<br/><button class='btn btn-default btn-xs'> Book </button>", onClick: function (args) { vm.bookAll(); }
});
}
},

Question...I had trouble centering the button within the header cell. Ended up setting left: 6. Is there a better way?