title: injecting angular ui bootstrap into app.js, but the datepicker is not showing in view
body: <p>I'm trying to configure a datepicker using the angular-ui-bootstrap plugin. </p>
  
  <p>I've downloaded and installed everything ok, but now the datepicker isn't showing in my view. I'm not getting any errors - it just doesn't render out in the view. I'm new to angular so a little lost. </p>
  
  <p>Here is my code:</p>
  
  <p>app.js - I'm injecting the datepicker here. </p>
  
  <pre><code>angular.module('MyApp', ['ngResource', 'mgcrea.ngStrap', 'stripe', 'ui.router','ui.bootstrap',  'ui.bootstrap.datepicker', 'ngAnimate'])
  .config(['$locationProvider', '$stateProvider', '$urlRouterProvider',  function($locationProvider, $stateProvider, stripeProvider, $urlRouterProvider){
  
  $locationProvider.html5Mode(true);
  
      $stateProvider
          // route to show our basic form (/form)
          .state('form', {
              url: '/',
              templateUrl: 'views/home.html',
              controller: 'formController'
          })
  
  blah blah
  </code></pre>
  
  <p>Then the controller:</p>
  
  <pre><code>angular.module('MyApp')
  .controller('formController', ['$scope', 'Appointment',   function($scope, Appointment) {
  
  
  //for the date picker directives
  
  $scope.dateTimeNow = function() {
      $scope.date = new Date();
    };
    $scope.dateTimeNow();
  
    $scope.toggleMinDate = function() {
      $scope.minDate = $scope.minDate ? null : new Date();
    };
  
    $scope.maxDate = new Date('2014-06-22');
    $scope.toggleMinDate();
  
    $scope.dateOptions = {
      startingDay: 1,
      showWeeks: false
    };
  
    // Disable weekend selection
    $scope.disabled = function(calendarDate, mode) {
      return mode === 'day' &amp;&amp; ( calendarDate.getDay() === 0 || calendarDate.getDay() === 6 );
    };
  
    $scope.hourStep = 1;
    $scope.minuteStep = 15;
  
    $scope.timeOptions = {
      hourStep: [1, 2, 3],
      minuteStep: [1, 5, 10, 15, 25, 30]
    };
  
    $scope.showMeridian = true;
    $scope.timeToggleMode = function() {
      $scope.showMeridian = !$scope.showMeridian;
    };
  
    $scope.resetHours = function() {
      $scope.date.setHours(1);
    };
  
  }]);
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"&gt;&lt;/script&gt;
  
   &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.2.1/angular-strap.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.2.1/angular-strap.tpl.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-messages.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-resource.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-route.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-cookies.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.min.js"&gt;&lt;/script&gt;
  
  
  &lt;!-- for datetimepicker--&gt;
  &lt;script type="text/javascript" src="components/angular-ui-datetimepicker/datetimepicker.js"&gt;&lt;/script&gt;
  &lt;!-- ENDS for datetimepicker--&gt;
  
  
  &lt;!-- Stripe includes--&gt;
  
   &lt;script type="text/javascript" src="components/stripe-angular/stripe-angular.js"&gt;&lt;/script&gt;
  
  &lt;!-- Ends Stripe includes --&gt;
  </code></pre>
  
  <p>html for datepicker:</p>
  
  <pre><code>&lt;datetimepicker min-date="minDate" show-weeks="showWeeks" hour-step="hourStep" minute-step="minuteStep" ng-model="formData.date" show-meridian="showMeridian" date-format="dd-MMM-yyyy" date-options="dateOptions"  readonly-time="false"&gt;&lt;/datetimepicker&gt;
  </code></pre>
  
  <p>I'm also including 
  1) the stylesheet
  2) the datepicker.js
  3) all of bootstrap etc. </p>
  
  <p>in the index.html</p>
  
  <p>What could i have missed?</p>