igDatePicker Angular with event and datepickerOptions

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://igniteui.com/js/angular.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/extensions/igniteui-angular.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet" />
<link href="http://igniteui.com/css/bootstrap/bootstrap.min.css" rel="stylesheet" />

<div ng-app="sampleApp" ng-controller="editorsController">
  <table id="" class="table table-striped table-hover">
    <thead>
      <tr>
        <th>Control Name</th>
        <th>HTML Element</th>
        <th>Ignite UI Controls</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>igTextEditor</td>
        <td>
          <input class="form-control" type="text" id="editor11" ng-model="editors.text" />
        </td>
        <td>
          <ig-text-editor class="form-control" id="editor1" ng-model="editors.text"></ig-text-editor>
        </td>
      </tr>
      <tr>
        <td>igDatePicker</td>
        <td>
          <input class="form-control" type="text" id="datePicker11" ng-model="editors.date" />
        </td>
        <td>
          <ig-date-picker class="form-control" id="datePicker1" ng-model="editors.date" event-drop-down-list-opened="calendarEvent" event-drop-down-list-closed="calendarEvent" event-blur="calendarEvent" event-rendered="pickerRendered">
            <datepicker-options number-of-months="2" change-year="true"></datepicker-options>
          </ig-date-picker>
       ...

CSS

.ui-datepicker .ui-datepicker-title select{
  /* header text is white.. bootstrap overrides select to inherit :( */
  color: black;
}

JavaScript

$(function() {
  var sampleApp = angular.module('sampleApp', ['igniteui-directives']);
  sampleApp.controller('editorsController', function($scope) {
    $scope.editors = {
      date: new Date(),
      text: 'event'
    };
    $scope.calendarEvent = function(ev, ui) {
      //handle event, use arguements
      $scope.$apply(function() {
        $scope.editors.text = /igdatepicker(.+)/.exec(ev.type).pop();
      });
    };
    $scope.pickerRendered = function(ev, ui) {
      $("#datePicker1").datepicker("widget").off("mousedown.editorList")
    };
  });
});