title: Extend Angular-UI Datepicker directive
body: <p>I have been using the ui-datepicker from Angular-ui-bootstrap a lot, but every time I use it, I need to set it up, the same way I do every time.
  So I was wondering if I could create a directive called custom-datepicker I could use like </p>
  
  <pre><code>&lt;custom-datapicker&gt;
  </code></pre>
  
  <p>So that I can set the settings in the directive once, and then reuse it everywhere on my site.</p>
  
  <p>I tried to create a directive like this one below</p>
  
  <pre><code>app.directive('customDatapicker', function () {
      return {
          restrict: 'E',
          require: 'ngModel',
          templateUrl: function (elem, attrs) {
              return '/AngularJS/Directives/customDatapicker.html'
          },
          link: function (scope, element, attrs, ngModel) {
          $scope.inlineOptions = {
              showWeeks: true
          };
  
          $scope.dateOptions = {
              formatYear: 'yy',
              startingDay: 1
          };
  
  
          $scope.open = function () {
              $scope.opened = true;
          };
  
          $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
          $scope.format = $scope.formats[0];
  
          $scope.selected = {
              opened: false
          };
  
          },
  });
  </code></pre>
  
  <p>I am also trying to use a template, so that i can do some custom html wrapper around it. So far I have got nothing besides the sample html <a href="https://angular-ui.github.io/bootstrap/#/datepicker" rel="nofollow">from</a> </p>
  
  <p>TemplateHTML</p>
  
  <pre><code>&lt;p class="input-group"&gt;
          &lt;input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="ngModel" is-open="selected.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" /&gt;
          &lt;span class="input-group-btn"&gt;
              &lt;button type="button" class="btn btn-default" ng-click="open()"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/span&gt;
      &lt;/p&gt;
  </code></pre>
  
  <p>In the Template html I'm trying to make the binding between my directive's input model in the datepicker's ng-model by doing ng-mode='ngModel', which i don't think is the right way.</p>
  
  <p>I use my directive in my html page like this, where <strong>data</strong> is a JS Date Object</p>
  
  <pre><code>&lt;custom-datapicker ng-model='data'&gt;
  </code></pre>
  
  <p>Can this be done?</p>