title: Need to open the datepicker popup on click of the calendar icon instead of clicking on the input field
body: <p>my below datepicker code is like below. Its working fine. But the datepicker popup opens when i click on the input field. But  want that to be open once i click on the calendar icon. Please suggest me a way to achieve that.</p>
  
  <pre><code> &lt;div class="col-sm-6 col-md-6 col-lg-6 padleft"&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="exampleSelect1"&gt;Start Date
          &lt;/label&gt;
          &lt;div class="input-group" style="width:75%"&gt;
          &lt;div class="input-group-btn"&gt;
          &lt;input type="text" 
          class="form-control date" 
          id="dateFrom" 
          placeholder="From" 
          ng-click="model.dateFrom=true"
          datepicker-popup="{{model.format}}" 
          ng-model="model.defect.startDate" 
          is-open="model.dateFrom" 
          datepicker-options="dateOptions" 
          date-disabled="model.disabled(date, mode)" 
          ng-required="true" 
          close-text="Close"  my-date&gt;
            &lt;span class="btn btn-default " ng-click="model.dateFrom=true"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt; &lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In My controller :</p>
  
  <pre><code>     self.format = 'MM-dd-yyyy';
       self.open = function($event) {
  
          $event.preventDefault();
          $event.stopPropagation();
  
          self.opened = {};
          self.opened[$event.target.id] = true;
  
          // log this to check if its setting the log    
          console.log(self.opened);
  
        };
  </code></pre>
  
  <p>Angular : 1.6
  Using 'ui.bootstrap.datetimepicker',
  and    'ui.bootstrap</p>