angularjs - angularで複数のjquery ui日付ピッカーを使用してスコープを分離する

Question

以下の date-picker-search ディレクティブのスコープを分離するのに問題があります。

(function(){
'use strict';

angular.module('ganeshaApp')
.directive('datePickerSearch', function(){
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModelCtrl){
            $(function(){
                element.datepicker({
                    dateFormat: 'd/m/yy',
                    onSelect: function(date){
                        scope.date = date;
                        scope.$apply();
                    }
                })
            });         
        }
    }
})
})();

私の最初の試みでは、このコードを使用してみましたが、予想どおり ng-model="date" で 1 つの入力を変更すると、同じ ng-model でディレクティブを参照するすべての入力が更新されます。

                    <tr>
                        <td>Publication Date:</td>
                        <td greyed-dates>
                            between
                            <div class="start inner-addon right-addon">
                                <i class="glyphicon glyphicon-calendar"></i>
                                <input type="text" ng-model="date"
                                       date-picker-search placeholder="dd/mm/yyyy"/>

                            </div>
                            <span>and</span>
                            <div class="end inner-addon right-addon">
                                <i class="glyphicon glyphicon-calendar"></i>
                                <input type="text" ng-model="date"
                                       date-picker-search placeholder="dd/mm/yyyy"/>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>Enactment Date:</td>
                        <td greyed-dates>
                            between
                            <div class="start inner-addon right-addon">
                                <i class="glyphicon glyphicon-calendar"></i>
                                <input type="text" ng-model="date"
                                       date-picker-search placeholder="dd/mm/yyyy"/>

                            </div>
                            <span>and</span>
                            <div class="end inner-addon right-addon">
                                <i class="glyphicon glyphicon-calendar"></i>
                                <input type="text" ng-model="date"
                                       date-picker-search placeholder="dd/mm/yyyy"/>
                            </div>
                        </td>
                    </tr>

すべてのモデルは、クリックまたは入力することで更新されます

ディレクティブでスコープを分離することで問題が解決すると考えました。カレンダーをクリックして日付を入力するだけの場合はある程度そうですが、手動で日付を入力しようとすると、ディレクティブを参照するすべての入力が更新されます。

クリックだけでモデル更新

この問題を解決できた唯一の方法は、各要素の ng-models を変更して、ランダムな親参照 (a.data、b.data、c.data、d.data) を与えることです。これにより、各日付ピッカーを個別に変更できますが、明らかに非常に悪い解決策です。ここで問題が何であるかを誰かが知っている場合は、助けていただければ幸いです。スコープを分離することと関係がありますよね？