title: Angular UI Bootstrap DatePicker customClass function not firing inside $watch
body: <p>I am trying to have my datePicker update when its scope changes.  I have added a watch but this seems to prevent the customClass function from firing.</p>
  
  <p>Directive HTML</p>
  
  <pre><code>&lt;datepicker-calendar search-response="searchResponse"&gt;&lt;/datepicker-calendar&gt;
  </code></pre>
  
  <p>Directive template (datepicker)</p>
  
  <pre><code>&lt;div uib-datepicker ng-model="dt" class="well well-sm" datepicker-options="options" ng-if="dt"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Angular Directive Code</p>
  
  <pre><code>var datepickerCalendarDirective = function datepickerCalendarDirective() {
          return {
              scope: {
                  searchResponse: '='
              },
              restrict: 'E',
              templateUrl: './templates/directive.datepickerCalendar.tmpl.html',
              link: function link(scope, element, attrs, $filter, policySessionService) {
  
                  scope.$watch('searchResponse', function () {
  
                      scope.dt = new Date();
  
                      if (!scope.searchResponse) return '';
  
                      /* setup the date picker options object.
                       * this takes a customClass function which sets the 
                       * css class of the trips/events on the datepicker
                       */
                      scope.options = {
                          customClass: getSelectedDates,
                          maxDate: new Date(),
                          showWeeks: false,
                          startingDay: 1 };
                  }, true);
  
                  /* Iterate over each trip in the reponse and return either
                  * a trip or incident css class to the customClass param
                  * of the datepicker options object
                  */
                  function getSelectedDates(data) {
                      if (scope.searchResponse.data[0] &amp;&amp; data.mode === 'day') {
                          var trips = $filter('orderBy')(scope.searchResponse.data[0].tripDates, 'JourneyDate'),
                              journeyDate;
  
                          for (var i = 0; i &lt; trips.length; i++) {
                              journeyDate = new Date(trips[i].JourneyDate).setHours(0, 0, 0, 0);
  
                              if (journeyDate === new Date(data.date).setHours(0, 0, 0, 0)) {
                                  // return the appropriate css class for the trip type (trip or incident)
                                  if (trips[i].IncidentRecorded) {
                                      return 'incident';
                                  } else {
                                      return 'trip';
                                  }
                              }
                          }
                      }
                      return '';
                  }
  
                  // });
              }
          };
      };
  </code></pre>
  
  <p>if i remove the scope watch then everything works as expected and the customClass function fires as not</p>