title: Datepicker angular directive for Bootstrap not showing
body: <p>In my Angular project I am trying to use the Angular directives for bootstrap <a href="https://angular-ui.github.io/bootstrap/#/datepicker">datepicker</a>, but it isn't showing up. </p>
  
  <p>I've linked to <code>&lt;script src="bower_components/angular-bootstrap/ui-bootstrap.js"&gt;&lt;/script&gt;</code> and
  <code>&lt;script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"&gt;&lt;/script&gt;</code> in my <em>index.html</em> and in my <em>app.js</em> I've put <code>ui.bootstrap</code> as a dependency.</p>
  
  <pre><code>angular
      .module('myApp', ['ui.bootstrap'])
  </code></pre>
  
  <p>Is there anything obvious I am missing?</p>
  
  <p>I am trying to use <code>uib-datepicker-popup</code> within a ng-switch within a ng-repeat, but I don't see why that would cause any problem:</p>
  
  <pre><code>&lt;div class="form-group" ng-repeat="field in vm.fields"&gt;
      &lt;label for="{{ field.propertyName }}"&gt;
          &lt;h5&gt;&lt;span translate="{{ field.translate }}"&gt;&lt;/span&gt;
              &lt;span class="form-control-required" ng-show="{{field.required}}"&gt;*&lt;/span&gt;
          &lt;/h5&gt;
      &lt;/label&gt;
      &lt;div ng-switch="field.type" ng-class="{ 'input-group': field.type === 'date' }"&gt;
          &lt;select ng-switch-when="gender"
                  name="{{ field.propertyName }}" id="{{ field.propertyName }}"
                  ng-model="vm.model[field.propertyName]" class="form-control"
                  ng-required="{{ field.required }}"&gt;
              &lt;option value="m"&gt;Male&lt;/option&gt;
              &lt;option value="f"&gt;Female&lt;/option&gt;
          &lt;/select&gt;
          &lt;textarea ng-switch-when="textarea"
                    name="{{ field.propertyName }}" id="{{ field.propertyName }}"
                    class="form-control" ng-model="vm.model[field.propertyName]"
                    ng-required="{{ field.required }}"&gt;&lt;/textarea&gt;
          &lt;input ng-switch-when="date"
                 type="date" uib-datepicker-popup="dd/MM/yyyy" 
                 show-weeks="false" is-open="vm.datePickerOpen"
                 name="{{ field.propertyName }}" id="{{ field.propertyName }}"
                 class="form-control pull-left" ng-model="vm.model[field.propertyName]"
                 ng-required="{{ field.required }}"&gt;
          &lt;span class="input-group-btn btn-" ng-if="field.type === 'date'"&gt;
              &lt;button type="button" class="btn btn-primary" 
                      ng-click="vm.openDatePicker($event)"&gt;
                  &lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;
              &lt;/button&gt;
          &lt;/span&gt;
          &lt;input ng-switch-default=""
                 type="{{ field.type }}" name="{{ field.propertyName }}" id="{{ field.propertyName }}"
                 class="form-control pull-left" ng-model="vm.model[field.propertyName]"
                 ng-required="{{ field.required }}"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And in my controller:</p>
  
  <pre><code>vm.datePickerOpen = false;
  
  vm.openDatePicker = function($event) {
      vm.datePickerOpen = true;
  };
  </code></pre>