javascript - angular $watch はトリガーされませんが、ディレクティブからテンプレートでモデルが更新されます

Question

Angular でモデルの変更イベントをキャッチできません。テンプレートで更新されたモデル値を表示できますが、コントローラーでは使用できません。

これは私のコードです:コントローラー:

//watches the date selector
    $scope.$watch('startDate', function (value1, value2) {
        console.log (value1, value2);
    });

テンプレート：

{{startDate}}{{endDate}}
<daterangepicker readonly start="startDate" end="endDate" format="currentUser.settings.dateFormat" options="daterangeoptions"></daterangepicker>

指令：

//daterange picker
myAppDirectives
.directive('daterangepicker', function ($parse, $timeout) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            options: '=options',
            start: '=start',
            end: '=end',
            format: '=format'
        },
        compile: function (element, attrs){
            //debugger;
            //var initialVal = attrs.startDate + attrs.endDate;
            var htmlText = '<div class="input-append pull-right">';
            htmlText += '<input type="text" readonly="" id="range" value="" />';
            htmlText += '<input type="hidden" name="startDate" ng-model="startDate" value="" />';
            htmlText += '<input type="hidden" name="endDate" ng-model="endDate" value="" />';
            htmlText += '<span class="add-on"><i class="icon-calendar"></i></span></div>';
            element.replaceWith(htmlText);
            //return function, does all the logic
            return function (scope, element, attrs) {
                var daterangecallback = function (start, end) {
                    //let angular know change happened to $scope
                    scope.start = start;
                    scope.end = end;
                    scope.$apply();
                }
                $timeout(function(){ 
                    var range = element.find('#range');
                    range.daterangepicker (scope.options, daterangecallback);
                    range.val(moment(scope.options.startDate).format(scope.options.format) + ' - ' + moment(scope.options.endDate).format(scope.options.format));
                });
            }
        }
    }
})