title: UI Bootstrap Datepicker Popup date format
body: <p>I'm using a UI Bootstrap Datepicker Popup, and I would like to use a custom date format. My rest service sends me dates with 'dd/MM/yyyy' format.
  I want to use this format but it when changing the model value, the date picker is not update. I defined <code>uib-datepicker-popup="dd/MM/yyyy"</code> but does not seem to work.</p>
  
  <p>Plunker : <a href="https://plnkr.co/edit/SfSXmeL0ue0yef1yTKMO?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/SfSXmeL0ue0yef1yTKMO?p=preview</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
  angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) {
    $scope.today = function() {
      $scope.dt = '02/01/2017';
    };
  
    $scope.clear = function() {
      $scope.dt = null;
    };
  
    $scope.dateOptions = {
      formatYear: 'yy',
      startingDay: 1
    };
  
    $scope.open1 = function() {
      $scope.popup1.opened = true;
    };
  
    $scope.popup1 = {
      opened: false
    };
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html ng-app="ui.bootstrap.demo"&gt;
    &lt;head&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"&gt;&lt;/script&gt;
      &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"&gt;&lt;/script&gt;
      &lt;script src="example.js"&gt;&lt;/script&gt;
      &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
  &lt;style&gt;
    .full button span {
      background-color: limegreen;
      border-radius: 32px;
      color: black;
    }
    .partially button span {
      background-color: orange;
      border-radius: 32px;
      color: black;
    }
  &lt;/style&gt;
  &lt;div ng-controller="DatepickerPopupDemoCtrl"&gt;
      &lt;pre&gt;Selected date is: &lt;em&gt;{{dt | date:'fullDate' }}&lt;/em&gt;&lt;/pre&gt;
  
      &lt;h4&gt;Popup&lt;/h4&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-6"&gt;
          &lt;p class="input-group"&gt;
            &lt;input type="text" class="form-control" uib-datepicker-popup="dd/MM/yyyy" ng-model="dt" is-open="popup1.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="open1()"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;/span&gt;
          &lt;/p&gt;
        &lt;/div&gt;
  
  
      &lt;/div&gt;
  
      &lt;hr /&gt;
      &lt;button type="button" class="btn btn-sm btn-info" ng-click="today()"&gt;Today&lt;/button&gt;
  &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>On the plunker:
  - Click "today", makes <code>$scope.dt = '02/01/2017'</code>
  - Open the date picker popup, it initialized on February the 1st instead of January the 2nd</p>