title: Angular datetimepicker issue
body: <p>I'm trying to create a multi step form with angular, that contains a datetimepicker, using ui.router and ui.angular.datetimepicker. </p>
  
  <p>i've got the form all working and loading the picker ok, but I'm getting a strange error:</p>
  
  <pre><code>Uncaught TypeError: object is not a functionangular-animate.js:938 (anonymous function)
  2angular.js:11607 TypeError: Cannot read property 'then' of undefined
      at Object.ngIfWatchAction [as fn] (angular.js:21974)
      at Scope.$get.Scope.$digest (angular.js:14243)
      at Scope.$get.Scope.$apply (angular.js:14506)
      at HTMLSpanElement.&lt;anonymous&gt; (angular.js:21443)
      at HTMLSpanElement.eventHandler (angular.js:3014)angular.js:11607 (anonymous function)angular.js:8557 $getangular.js:14261 $get.Scope.$digestangular.js:14506 $get.Scope.$applyangular.js:21443 (anonymous function)angular.js:3014 eventHandler
  </code></pre>
  
  <p>whenever I select the dates on the form. I'm a noob to angular and trying to work out what this is - I'm adding the angular-animate.js file from Google's hosted libraries so this is ok -  can anyone help?</p>
  
  <p>I have the following app: </p>
  
  <pre><code>angular.module('formApp', ['ngAnimate', 'ui.router', 'ui.bootstrap', 'ui.bootstrap.datetimepicker' ])
  
  // configuring our routes 
  // =============================================================================
  .config(function($stateProvider, $urlRouterProvider) {
  
      $stateProvider
  
          // route to show our basic form (/form)
          .state('form', {
              url: '',
              templateUrl: 'views/home.html',
              controller: 'formController'
          })
          // nested states 
          // each of these sections will have their own view
          // url will be nested (/form/profile)
         .state('form.date', {
              url: '',
              templateUrl: 'views/form-date.html'
          })
  
          // url will be /form/interests
          .state('form.address', {
              url: '/',
              templateUrl: 'views/form-interests.html'
          })
  
          // url will be /form/payment
          .state('form.payment', {
              url: '/',
              templateUrl: 'views/form-payment.html'
          })
  
           // url will be /form/payment
          .state('form.appointments', {
              url: '/appointments',
          });
  
      // catch all route
      // send users to the form page 
      $urlRouterProvider.otherwise('/');
  })
  </code></pre>
  
  <p>I have the following home.html:</p>
  
  <pre><code>&lt;div id="form-container"&gt;
  
                      &lt;div class="page-header text-center"&gt;
  
  
                          &lt;!-- the links to our nested states using relative paths --&gt;
                          &lt;!-- add the active class if the state matches our ui-sref --&gt;
                          &lt;div id="status-buttons" class="text-center"&gt;
                              &lt;a ui-sref-active="active" ui-sref=".date"&gt;&lt;span&gt;1&lt;/span&gt; Date&lt;/a&gt;
                              &lt;a ui-sref-active="active" ui-sref=".address"&gt;&lt;span&gt;2&lt;/span&gt; Address&lt;/a&gt;
                              &lt;a ui-sref-active="active" ui-sref=".payment"&gt;&lt;span&gt;3&lt;/span&gt; Payment&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;!-- use ng-submit to catch the form submission and use our Angular function --&gt;
                      &lt;form id="signup-form" ng-submit="processForm()"&gt;
  
                          &lt;!-- our nested state views will be injected here --&gt;
  
                          &lt;div id="form-views" ui-view&gt;&lt;/div&gt;
                      &lt;/form&gt;
  
                  &lt;/div&gt; 
  </code></pre>
  
  <p>and then to inject the form-date.html:</p>
  
  <pre><code>&lt;h3&gt;When would you like a helper?&lt;/h3&gt;
  &lt;datetimepicker data-ng-model="formData.date"
      data-datetimepicker-config="{ startView:'day', minView:'hour' }" /&gt;
  
  &lt;div&gt; You've selected: {{formData.date}}&lt;/div&gt;
  
  &lt;div class="form-group row"&gt;
  &lt;div class="col-xs-6 col-xs-offset-3"&gt;
      &lt;a ui-sref="form.payment" class="btn btn-block btn-info"&gt;
      Next Section &lt;span class="glyphicon glyphicon-circle-arrow-right"&gt;&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm using a custom CSS for the animation styling styling:</p>
  
  <pre><code>/* ANIMATION STYLINGS
  ============================================================================= */
  #signup-form            { position:relative; min-height:300px; overflow:hidden; padding:30px; }
  #form-views             { width:auto; }
  
  /* basic styling for entering and leaving */
  /* left and right added to ensure full width */
  #form-views.ng-enter,
  #form-views.ng-leave      { position:absolute; left:30px; right:30px;
      transition:0.5s all ease; -moz-transition:0.5s all ease; -webkit-transition:0.5s all ease; 
  }
  
  /* enter animation */
  #form-views.ng-enter            { 
      -webkit-animation:slideInRight 0.5s both ease;
      -moz-animation:slideInRight 0.5s both ease;
      animation:slideInRight 0.5s both ease; 
  }
  
  /* leave animation */
  #form-views.ng-leave            { 
      -webkit-animation:slideOutLeft 0.5s both ease;
      -moz-animation:slideOutLeft 0.5s both ease;
      animation:slideOutLeft 0.5s both ease;   
  }
  
  /* ANIMATIONS
  ============================================================================= */
  /* slide out to the left */
  @keyframes slideOutLeft {
      to      { transform: translateX(-200%); }
  }
  @-moz-keyframes slideOutLeft {  
      to      { -moz-transform: translateX(-200%); }
  }
  @-webkit-keyframes slideOutLeft {
      to      { -webkit-transform: translateX(-200%); }
  }
  
  /* slide in from the right */
  @keyframes slideInRight {
      from    { transform:translateX(200%); }
      to      { transform: translateX(0); }
  }
  @-moz-keyframes slideInRight {
      from    { -moz-transform:translateX(200%); }
      to      { -moz-transform: translateX(0); }
  }
  @-webkit-keyframes slideInRight {
      from    { -webkit-transform:translateX(200%); }
      to      { -webkit-transform: translateX(0); }
  }
  </code></pre>
  
  <p>EDIT - Controller:</p>
  
  <pre><code>angular.module('formApp')
  .controller('formController', ['$scope', function($scope) {
  
      $scope.beforeRender = function ($view, $dates, $leftDate, $upDate, $rightDate) {
      var index = Math.floor(Math.random() * $dates.length);
      $dates[index].selectable = false;
  }
  
      // we will store all of our form data in this object
      $scope.formData = {};
      $scope.formData.date = "";
      $scope.opened        = false;
  
      $scope.time1 = new Date();
      $scope.showMeridian = true;
      //Datepicker
      $scope.dateOptions = {
          'year-format': "'yy'",
          'show-weeks' : false, 
          'show-time':true
      };
  
      // function to process the form
      $scope.processForm = function() {
          alert('awesome!');
          var appointment = new Appointment();
          console.log(appointment);
      };
  }]);
  </code></pre>
  
  <p>The services come from the following plugin:</p>
  
  <p><a href="https://github.com/dalelotts/angular-bootstrap-datetimepicker" rel="nofollow">https://github.com/dalelotts/angular-bootstrap-datetimepicker</a></p>
  
  <p>so would suspect it's not in there - but as I'm a noob i'm a little lost :-/</p>