title: How to set StartDate of EndDate datepicker based on StartDate datepicker selected value in AngularJS
body: <p>I am working on AngularJS. I am trying to dynamically generate rows when user clicks on "Add New Row" button. Here is my <code>$scope</code> array variable,</p>
  
  <pre><code>$scope.avails = [{"Name":"","startdate":"","enddate":""}];
  
  $scope.addNewRow=function() {
     $scope.avails.push({"Name":"","startdate":"","enddate":""});
  }
  </code></pre>
  
  <p>and here is my markup</p>
  
  <pre><code>&lt;div class="row" ng-repeat="ff in avails"&gt;
     &lt;label&gt;Name&lt;/label&gt;
     &lt;input type="text" ng-model="ff.Name"/&gt;
     &lt;label&gt;Start Date&lt;/label&gt;
     &lt;div class="input-group"&gt;
        &lt;span class="input-group-addon"&gt;&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;&lt;/span&gt;
        &lt;input type="text" class="form-control" b-datepicker name="startdate" id="startdate{{$index}}" ng-model="ff.startdate" value="{{ff.startdate}}" placeholder="Start Date" &gt;
     &lt;/div&gt;
     &lt;label&gt;End Date&lt;/label&gt;
     &lt;div class="input-group"&gt;
        &lt;span class="input-group-addon"&gt; &lt;i class="fa fa-calendar"&gt;&lt;/i&gt;&lt;/span&gt;
        &lt;input type="text" class="form-control" b-datepicker name="startdate" id="startdate{{$index}}" ng-model="ff.startdate" value="{{ff.startdate}}" placeholder="Start Date" &gt;
     &lt;/div&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>and I write a <code>directive</code> for date picker like:</p>
  
  <pre><code>.directive('bDatepicker', function() {
     return {
        restrict: 'A',
        require: '?ngModel',
        link: function(scope, el, attr,ngModel) {     
           ngModel.$render = function() { 
              el.datepicker('update', ngModel.$viewValue || '');
           };
  
           el.datepicker({
              autoclose:true,
              format:'mm/dd/yyyy'
           }).on('changeDate', function(value) {
              var dateStrToSend = (value.date.getMonth() + 1) +'/'+value.date.getDate()+'/'+value.date.getFullYear();
              scope.$apply(function () {
                 ngModel.$setViewValue(dateStrToSend);
              });     
  
              $(".datepicker").hide();
           });
        }
     };
  })
  </code></pre>
  
  <p>Now I am able to create a new row when user clicks on <code>Add New</code> Button, Each row contains start and end date pickers, when user select a date under start date picker, I need to set that date as startdate of corresponding end date picker. </p>
  
  <p>Since I am applying directive to element as a attribute, how to change value of another element from this directive?</p>