injecting angular ui bootstrap into app.js, but the datepicker is not showing in view

I'm trying to configure a datepicker using the angular-ui-bootstrap plugin.

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.

Here is my code:

app.js - I'm injecting the datepicker here.

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

Then the controller:

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' && ( 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);
  };

}]);

index.html

<script src="http://ift.tt/1FNMK4R"></script>

 <script src="http://ift.tt/14B6GuR"></script>

<script src="http://ift.tt/1FNMLWA"></script>
<script src="http://ift.tt/1C6BPEg"></script>
<script src="http://ift.tt/1CLc9gU"></script>
<script src="http://ift.tt/1Bod6X7"></script>
<script src="http://ift.tt/1FNMK51"></script>
<script src="http://ift.tt/1C6BPEm"></script>
<script src="http://ift.tt/1FNMKlk"></script>
<script src="http://ift.tt/1C6BPEs"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.min.js"></script>


<!-- for datetimepicker-->
<script type="text/javascript" src="components/angular-ui-datetimepicker/datetimepicker.js"></script>
<!-- ENDS for datetimepicker-->


<!-- Stripe includes-->

 <script type="text/javascript" src="components/stripe-angular/stripe-angular.js"></script>

<!-- Ends Stripe includes -->

html for datepicker:

<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"></datetimepicker>

I'm also including 1) the stylesheet 2) the datepicker.js 3) all of bootstrap etc.

in the index.html

What could i have missed?