Datepicker with angularjs

HTML

<script src="https://rawgithub.com/timrwood/moment/2.1.0/moment.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/mint-choc/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"></script>
<div ng-app="Perspective">
    <div class='row-fluid' ng-controller='DashboardDatePickerCtrl'>
      <div class='span4 offset5'>
        <span class='fui-arrow-left right10 top5 font-large pointer' ng-click='previousPeriod()'>
            previous-period
        </span>
        <span class='control-group inline'>
          <div class='input-prepend input-datepicker'>
            <input class='span12' datepicker='' id='datepicker-01' ng-model='date' type='text'>
          </div>
        </span>
        <span class='fui-arrow-right left10 font-large pointer' ng-click='nextPeriod()'>
            next-period
        </span>
        {{ date }}
      </div>
    </div>
    <div class='row-fluid'>
      <div class='span12' ng-controller='otherCtrl'>
        <h6>An other ng controller</h6>
        <p>
          {{ date.format("DD MMM, YYYY") }}
        </p>
      </div>
    </div>
</div>

JavaScript

window.App = angular.module('Perspective', ['ngResource']);

App.directive('datepicker', function(selectedDate) {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      return $(document).ready(function(){
        console.log(element.datepicker);
        console.log($.ui);
        element.datepicker({
          showOtherMonths: true,
          selectOtherMonths: true,
          dateFormat: "d MM, yy",
          yearRange: '-1:+1',
          onSelect: function(date) {
            selectedDate.from = moment(date);
            scope.date = moment(date);
            return scope.$apply();
          }
        });
        return scope.$watch('date', function(val) {
          return console.log("pass");
        }, true);
      });
    }
  };
});

App.factory("selectedDate", [
  '$rootScope', function($rootScope) {
    var selectedDates;
    selectedDates = {};
    selectedDates.from = moment();
    selectedDates.prepForBroadcast = function(date) {
      this.from = date;
      return this.broadcastItem();
    };
    selectedDates.nextPeriod = function() {
      return this.from.add('days', 1);
    };
    selectedDates.previousPeriod = function() {
      return this.from.subtract('days', 1);
    };
    selectedDates.broadcastItem = function() {
      return $rootScope.$broadcast('selectedDateUpdated');
    };
    return selectedDates;
  }
]);

App.controller("DashboardDatePickerCtrl", [
  '$scope', 'selectedDate', function($scope, selectedDate) {
    $scope.nextPeriod = function() {
      return selectedDate.nextPeriod();
    };
    $scope.previousPeriod = function() {
      return selectedDate.previousPeriod();
    };
    return $scope.date = selectedDate.from;
  }
]);

App.controller("otherCtrl", [
  '$scope', 'selectedDate', function($scope, selectedDate) {
    return $scope.date = selectedDate.from;
  }
]);