<div ng-app="myApp">
  <div class="container" ng-controller="MyController as vm">
    Init Values: {{vm.foo}} - {{vm.meh}}
    <br/>
    <hr/>
    <div class="row">
      <div ng-app="date">
        <div>
          <div class="input-group input-daterange" id="fromToDate" calendar ng-model="vm.fromToDate">
            <input type="text" class="form-control input-sm" ng-model="vm.bookingFromDate">
            <span class="input-group-addon">to</span>
            <input type="text" class="form-control input-sm" ng-model="vm.bookingToDate">
          </div>
        </div>
      </div>
    </div>
    <hr/> Reading Value: {{vm.bookingFromDate}} - {{vm.bookingToDate}}
  </div>
</div>

body {
  padding: 20px 0px;
}

(function() {
  'use strict'
  angular
    .module('myApp', [])
    .directive("calendar", function() {
      return {
        require: 'ngModel',
        restrict: "A",
        link: function(scope, el, attr) {
          $(el).datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayHighlight: true,
            todayBtn: 'linked',
            onSelect: function(dateText) {
              $scope.$apply(function() {
                ngModel.$setViewValue(dateText);
              });
            }
          });
        }
      };
    })
})();

(function() {
  'use strict'

  var controllerId = 'MyController'

  angular
    .module('myApp')
    .controller(controllerId, myCtrl);

  function myCtrl() {
    var vm = this;

    init();

    function init() {
      vm.bookingFromDate = moment().subtract(7, 'days').format('YYYY-MM-DD');
      vm.bookingToDate = moment().format('YYYY-MM-DD');
      vm.foo = vm.bookingFromDate;
      vm.meh = vm.bookingToDate;

      $('#fromDate').val(vm.bookingFromDate);
      $('#toDate').val(vm.bookingToDate);
    }
  }
})();