title: Angularjs simple datepicker using controller as not $scope
body: <p>I am trying to use the angular-ui bootstrap for dateranges.</p>
  
  <p><a href="http://angular-ui.github.io/bootstrap/#/datepicker" rel="nofollow">http://angular-ui.github.io/bootstrap/#/datepicker</a> </p>
  
  <p>The link contains some good examples.  However I want to use <code>controller as</code> syntax and not the scope as it shows in the link above. </p>
  
  <p>I have attempted it as seen below. But its not showing the calendar box when its clicked on.  Its not returning any errors either so im a bit lost as to what I need to do.  I think my example is close.</p>
  
  <p>Here is my attempt on <a href="http://plnkr.co/edit/lANpSw?p=preview" rel="nofollow">fiddle</a></p>
  
  <p>Code snippets below..</p>
  
  <p><strong>js_file.js</strong></p>
  
  <pre><code>angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
  angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function() {
  
    self = this;
    self.someProp = 'Check This value displays.. confirms controller initalised'
  
    self.opened = {};
    self.open = function($event) {
  
      $event.preventDefault();
      $event.stopPropagation();
  
      self.opened = {};
      self.opened[$event.target.id] = true;
  
      // log this to check if its setting the log    
      console.log(self.opened);
  
    };
  
    self.format = 'dd-MM-yyyy'
  });
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;body&gt;
  &lt;div ng-controller="DatepickerDemoCtrl as demo"&gt;
  &lt;style&gt;
    #dateFrom, #dateTo { width: 200px;}
  &lt;/style&gt;
  
    {{ demo.someProp }}
  
    &lt;div class="form-group"&gt;
  
        &lt;div class="input-group"&gt;
  
            &lt;input type="text" 
              class="form-control date" 
              id="dateFrom" 
              placeholder="From" 
              ng-click="demo.open($event)"   
              datepicker-popup="{{demo.format}}" 
              ng-model="demo.dtFrom" 
              is-open="demo.dateFrom" 
              min-date="minDate" 
              max-date="'2015-06-22'" 
              datepicker-options="dateOptions" 
              date-disabled="disabled(date, mode)" 
              ng-required="true" 
              close-text="Close" &gt;
  
  
            &lt;input type="text" 
              class="form-control date" 
              id="dateTo"   
              placeholder="To" 
              ng-click="demo.open($event)"  
              datepicker-popup="{{demo.format}}" 
              ng-model="demo.dtTo" 
              is-open="demo.dateTo" 
              min-date="minDate" 
              max-date="'2015-06-22'" 
              datepicker-options="dateOptions" 
              date-disabled="disabled(date, mode)" 
              ng-required="true" 
              close-text="Close" &gt;
  
        &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>