AngularJS callback to directive

by simshaun

HTML

<script src="http://code.angularjs.org/1.1.3/angular.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://simshaun.com/dev/datepicker.css">
<script src="http://simshaun.com/dev/bootstrap-datepicker.js"></script>
<div ng-controller="MyCtrl">
    <p ng-show="dateChanged">date changed!</p>
    <input type="text" value="02-16-2012" class="datepicker" datepicker="">
</div>

CSS

body {
    margin: 100px;
}

p {
    font-size: 40px;
    line-height: 1;
    margin: 100px 0;
}

JavaScript

var app = angular.module('app', [])
.directive('datepicker', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            // Uncommenting the line below causes
            // the "date changed!" text to appear.
            // scope.dateChanged = true;
            
            var dateInput = angular.element('.datepicker')
            
            dateInput.datepicker(scope.datepickerOpts);
            
            // The datepicker fires a changeDate event
            // when a date is chosen. I want to execute the
            // callback defined in a controller.
            // ---
            // PROBLEM: 
            // Angular does not recognize that $scope.dateChanged
            // is changed in the callback. The view does not update.
            dateInput.bind('changeDate', scope.onDateChange);
        }
    };
});

var myModule = angular.module('myModule', ['app'])
.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.dateChanged = false;
    
    $scope.datepickerOpts = {
        autoclose: true,
        format: 'mm-dd-yyyy'
    };
    
    $scope.onDateChange = function () {
        alert('onDateChange called!');
        
        // ------------------
        // PROBLEM AREA:
        // This doesnt cause the "date changed!" text to show.
        // ------------------
        $scope.dateChanged = true;
        
        setTimeout(function () {
            $scope.dateChanged = false;
        }, 5000);
    };
}]);