clickable bootstrap-datepicker icon with angular directive

Question

I'm using angularjs and I want my bootstrap-datepicker to be shown after clicking in calendar icon.
Now it's like this:

<div class="input-append date datepicker">
    <input type="text" b-datepicker ng-model="date"/> 
    <span class="add-on" ><i class="icon-calendar"></i></span>
</div>

Where b-datepicker is custom directive. Click in text field shows datepicker, but icon click doesn't work.
Here's sources: http://jsfiddle.net/cPVDn/

My goal is to be like this:
http://jsfiddle.net/6QnMB/

I appreciate any help

UPDATE:
Here's solution:
http://jsfiddle.net/cPVDn/53/

Answer 1

See good plugin from AngularStrap that will solve your problem: link.

JS

.config(function($datepickerProvider) {
  angular.extend($datepickerProvider.defaults, {
    dateFormat: 'dd/MM/yyyy',
    startWeek: 1
  });
})

HTML

<input type="text"
    class="form-control"
    ng-model="selectedDateAsNumber" 
    data-date-format="yyyy-MM-dd"
    data-date-type="number" 
    data-min-date="02/10/86"
    data-max-date="today"
    data-autoclose="1" 
    name="date2"
    bs-datepicker>

See Demo Plunker

---

And this is their main page