title: Bootstrap ui Collapse is open as default
body: <p>I'm having a problem with bootstrap ui collapsed directive, It show open as default and I needed collapsed on page load,  I'm setting the variables correctly but still doesn't work correctly</p>
  
  <p>here's part of my code:</p>
  
  <pre><code>aside class="col-md-3 leftSidebar separator-right" ng-controller="Collapse as vm"&gt;
  &lt;div class="row separator"&gt;
      &lt;div class="sidebarPosition"&gt;
          &lt;div class="leftSidebar__toggle"&gt;
              &lt;a class="mod" ng-click="vm.isCollapsedLeft = !vm.isCollapsedLeft"&gt;&lt;span class="fa fa-bars"&gt;&lt;/span&gt; Outline&lt;/a&gt;
  
              &lt;ul uib-collapse="vm.isCollapsedLeft"&gt;
                  &lt;li&gt;&lt;a href="#scientific_abstract" du-smooth-scroll&gt;Scientific Abstract&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#layperson_abstract" du-smooth-scroll&gt;Layperson’s Abstract&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#introduction" du-smooth-scroll&gt;Introduction&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Results&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Discussion&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Methods&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Additional Information&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Change History&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Acknowledgements&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Author Information&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Author Contributions&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row leftSidebar__sections"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a ui-sref="article.figures"&gt;&lt;span class="fa fa-picture-o"&gt;&lt;/span&gt; Figures&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a ui-sref="article.references"&gt;&lt;span class="fa fa-link"&gt;&lt;/span&gt; References&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span class="fa fa-retweet"&gt;&lt;/span&gt; Related&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt; &lt;span class="fa fa-area-chart"&gt;&lt;/span&gt; Stats Impact&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a ui-sref="article.comments"&gt;&lt;span class="fa fa-comment"&gt;&lt;/span&gt; Comments&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/aside&gt;
  </code></pre>
  
  <p>my Controller:</p>
  
  <pre><code>(function () {
  'use strict';
  
  angular
      .module('app.bootstrap')
      .controller('Collapse', Collapse);
  
  function Collapse() {
  
      var vm = this;
  
      vm.isCollapsedLeft = false;
      vm.isCollapsedRight = false;
  
  }
  
  })();
  </code></pre>
  
  <p>and here's a plunkr: <a href="https://plnkr.co/edit/D0vFMEQe4a2GT1yJLTLk?p=preview" rel="nofollow">https://plnkr.co/edit/D0vFMEQe4a2GT1yJLTLk?p=preview</a></p>
  
  <p>Thanks for the help.</p>