datepicker isn't working in my ionic app

Hi,

Thank you for developing this. It looks like a great tool. Unfortunately i am having trouble getting it work in my ionic app. The input box appears but the hover image is a circle with a line through it and the input selection is disabled. I expect that i am missing something obvious. Can you help?

This tool is installed in my ionic project directory under www/lib/datepicker.

The app declaration looks like this:

angular.module('myApp', ['ionic',
                         'angular-datepicker',
                         'myApp.controllers',
                         'myApp.services'
                         ])

The HTML header looks like like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>myApp</title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="lib/date-picker/themes/default.date.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="lib/d3/d3.min.js"></script>
    <script src="lib/date-picker/angular-datepicker.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>

My HTML page looks like this.

<ion-view title="My App">
    <ion-header-bar class="bar-subheader myapp-header-colors">
        <ion-tabs class="tabs-icon-left"
             delegate-handle="myapp-tabs"
             style="width: 100%">
            <ion-tab title="Date"
                     icon="ion-ios7-compose-outline"
                     on-select="showDate()">
            </ion-tab>
            <ion-tab title="Progress"
                     icon="ion-arrow-graph-up-right"
                     ng-click="showProgress()">
            </ion-tab>
        </ion-tabs>
    </ion-header-bar>
    <ion-content class="has-header padding">
        <div ng-show="show_date">
            Date not enabled yet.
            <p>datepicker</p>
            <!-- user chooses their date here -->
            <input type="text" pick-a-date="date" placeholder="Select Date" />
            <p>other stuff</p>
        </div>
        <div ng-show="show_progress">
            Progress not enabled.
        </div>
    </ion-content>
</ion-view>

Here is the controller:

.controller('MyAppCtrl', function($scope, $state, $rootScope, $ionicTabsDelegate) {
    // This is a complex page with multiple sub tabs.
    $ionicTabsDelegate.$getByHandle('myapp-tabs').select(0);
    $scope.show_date = true;
    $scope.show_progress = false;
    $scope.date = {date: null};

    $scope.showDate = function() {
        $ionicTabsDelegate.$getByHandle('myapp-tabs').select(0);
        $scope.show_date  = true;
        $scope.show_progress = false;
    };

    $scope.showProgress = function() {
        $ionicTabsDelegate.$getByHandle('myapp-tabs').select(1);
        $scope.show_date  = false;
        $scope.show_progress = true;
    };
})

The text shows up properly but I the icon changes to a circle with a line through it when the cursor hovers over the input field and the popup doesn't appear.

alongubkin / angular-datepicker

datepicker isn't working in my ionic app #17