Date Control Visualization

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="date-template"></div>
<div ng-controller="InputController">
    <div date-field date-val="dateValue"></div>
</div>
<div ng-controller="DisplayController">
    <table>
        <tr>
            <th>Birth Date</th>
            <td>{{ date | date:'mediumDate'}}</td>
        </tr>
    </table>
</div>

JavaScript

var angApp = angular.module('someApp', []);

angApp.controller("InputController", function ($scope) {
    $scope.dateValue = new Date();
});

angApp.controller("DisplayController", function ($scope) {
    $scope.date = new Date();
    $scope.$on("dateValueChanged", function (event, args) {
        $scope.$apply($scope.date = args.newDate);
    });
});


angApp.directive("dateField", function () {
    return {
        restrict: 'A',
        replace: true,
        transclude: false,
        template: '<div>Enter New Date: <input class="datepicker" type="text" ng-model="dateValString" /></div>',
        scope: {
            dateVal: "=dateVal"
        },
        controller: function ($scope, $filter) {
            $scope.dateValString = $filter('date')($scope.dateVal, 'mediumDate');
        },
        link: function (scope, element, attrs) {
            $(element).find(".datepicker").datepicker({
                dateFormat: 'M d, yy'
            });
            $(element).find(".datepicker").on('change', function () {
                console.log("olddateVal " + scope.dateVal);
                scope.dateVal = $(this).datepicker("getDate");
                console.log("newDateVal " + scope.dateVal);
                scope.$root.$broadcast("dateValueChanged", {
                    newDate: scope.dateVal
                });
            });
        }
    };
});