angularjs - Isolating scopes with multiple jquery ui date pickers in angular -

i'm having problems isolating scopes of date-picker-search directive below.

(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();                     }                 })             });                  }     } }) })(); 

in first attempt tried using code, expected changing 1 input ng-model="date" updates inputs referencing directive same 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> 

all models update clicking or typing

i figured isolating scopes in directive solve problem. degree, when clicking on calendar input dates, when try type dates in manually, again inputs reference directive updated.

models update clicking only

the way able sort of resolve problem changing ng-models on each of elements giving them random parent reference (a.data, b.data, c.data, d.data). while allows changes made each date picker in isolation, it's bad solution. if has idea problem might here, i'd appreciate help. it's isolating scopes, right?

according me, second solution way.

even if achieved isolating of scope using $scope.date variable, bring inconsistency. (what if want use $scope.date in controller, how ajs know date-picker value talking about).

ajs changing value date-picker expected behavior.

using different variable have done. i.e a.date, b.date ..

---

can use

 link: function(scope, element, attrs, ngmodelctrl){             $(function(){                 element.datepicker({                     dateformat: 'd/m/yy',                     onselect: function(date){                         scope.$apply(function () {                         ngmodelctrl.$setviewvalue(date);                     });                     }                 })             });                  } 

---

, in html

<input type="text" ng-model="a.date" date-picker-search placeholder="dd/mm/yyyy"/>  <input type="text" ng-model="b.date" date-picker-search placeholder="dd/mm/yyyy"/>  

and on.

---

here codepen reference. hope helps.