title: how do I get the calendar object with AngularJS ui-calendar using the "controller as" syntax?
body: <p>I am using <a href="https://github.com/angular-ui/ui-calendar">ui-calendar</a> from angular-ui. It's very nice and easy to use.</p>
  
  <p>However, I am unable to get a hold of <strong>calendar object</strong> to call <code>fullCalendar()</code> and execute certain functions on the calendar.</p>
  
  <p>The documentation only gives examples using the <code>$scope</code> approach, but I am using the <code>controller as vm</code> approach recommended by John Papa and others. I have tried using it this way:
  </p>
  
  <pre><code>&lt;div data-ng-controller="races as vm"&gt;
      &lt;div ui-calendar="vm.calendarConfig" calendar="vm.calendar"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>in the races controller I have the following:
  </p>
  
  <pre><code>vm = this;
  vm.calendarConfig = { header: {...} };
  vm.calendar = {};
  
  // somewhere else in a separate click event
  vm.calendar.fullCalendar('prev');    // ---&gt; exception
  </code></pre>
  
  <p>That last line throws an exception <code>Object has no method 'fullCalendar'</code>.</p>
  
  <p>Just wondering what I am missing and if anyone had an example of using <code>ui-calendar</code> with a <code>controller as vm</code> syntax.</p>
  
  <p>Here is the plunker: <a href="http://plnkr.co/edit/DPo9meJHx19bREYFLhDh">http://plnkr.co/edit/DPo9meJHx19bREYFLhDh</a></p>