javascript - (Angular + Bootstrap) How to stop two datepickers from being opened by the same button -

i have web page needs 2 datepickers, start date , end date. problem is, whenever click on glyph open date selector, both date picker opens @ same time.

here template, directive, controller , how it's being used. appreciated.

template:

<div class="input-group">     <input type="text" class="form-control" uib-datepicker-popup="dd/mm/yyyy" ng-model="start_date" is-open="popup.opened" datepicker-options="dateoptions" ng-required="true" close-text="close" />     <span class="input-group-btn">         <button type="button" class="btn btn-default" ng-click="open()">             <i class="glyphicon glyphicon-calendar"></i>         </button>     </span> </div> 

directive:

'use strict'; /*global angular*/  angular.module("myapp") .directive("datepicker", function(){     return{         templateurl: 'templates/datepicker.html',         controller: 'newdatectrl',         replace: true     }; }); 

controller

/*global angular*/ angular.module("myapp").controller("newdatectrl", function($scope) {      $scope.popup = {         opened: false     };      $scope.open = function() {         $scope.popup.opened = true;     };      $scope.dateoptions = {         formatyear: 'yy',         maxdate: new date(2020, 5, 22),         mindate: new date(),         startingday: 1     };  }) 

index.html, part of form this:

.... <div class="form-group">     <label class="control-label col-sm-2">         start date     </label>     <div class="col-sm-10">         <datepicker></datepicker>     </div> </div> <div class="form-group">     <label class="control-label col-sm-2">         end date     </label>     <div class="col-sm-10">         <datepicker></datepicker>     </div> </div> .... 

two things: - when declaring directive, use isolate scope.

i.e.

.directive('...', function() {   return {    .... // existing stuff    scope: {} // gives each directive instance isolated scope   } }); 

• i think 'datepicker' name of bootstrap directive already, if you're wrapping should consider giving different name.