title: Videogular controls not fully rendering
body: <p>I'm implementing a site that is using Videogular to play the videos as it integrates nicely with the rest of the AngularJS within the site. Every file that is needed appears to be in the correct location in the path but the end result is only the total time, the elapsed time, and the elapsed time bar are shown.</p>
  
  <p>Now I now the controls are there as if I hover over where the volume control should be the volume appears.</p>
  
  <p>I'm testing in Chrome Version 32.0.1700.107. I think I followed the demo to the letter.</p>
  
  <p>This is how I"m referencing the specific style sheets</p>
  
  <pre><code>    &lt;link rel="stylesheet" href="css/bootstrap.css"&gt;
      &lt;link rel="stylesheet" href="css/offcanvas.css"&gt;
      &lt;link rel="stylesheet" href="css/videogular/videogular.css"&gt;
      &lt;link rel="stylesheet" href="css/app2.css"/&gt;
  </code></pre>
  
  <p>This is how I'm pulling in the js files. Not shown are inclusion of jquery, bootstrap, and offcanvas js files.</p>
  
  <pre><code>    &lt;script src="lib/angular/angular.js"&gt;&lt;/script&gt;
      &lt;script src="lib/angular/angular-route.js"&gt;&lt;/script&gt;
      &lt;script src="lib/angular/angular-sanitize.js"&gt;&lt;/script&gt;
      &lt;script src="js/videogular/videogular.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/videogular/plugins/controls.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/videogular/plugins/overlay-play.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/videogular/plugins/buffering.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/videogular/plugins/poster.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;script src="js/services.js"&gt;&lt;/script&gt;
      &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
      &lt;script src="js/filters.js"&gt;&lt;/script&gt;
      &lt;script src="js/directives.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I even used the same config as the demo</p>
  
  <pre><code>  $scope.config = {
      width: 640,
      height: 360,
      autoHide: false,
      autoPlay: true,
      responsive: true,
      theme: {
        url: "css/videogular/videogular.css",
        playIcon: "&amp;#xe000;",
        pauseIcon: "&amp;#xe001;",
        volumeLevel3Icon: "&amp;#xe002;",
        volumeLevel2Icon: "&amp;#xe003;",
        volumeLevel1Icon: "&amp;#xe004;",
        volumeLevel0Icon: "&amp;#xe005;",
        muteIcon: "&amp;#xe006;",
        enterFullScreenIcon: "&amp;#xe007;",
        exitFullScreenIcon: "&amp;#xe008;"
      }
  </code></pre>
  
  <p>Finally my directory structure is this:</p>
  
  <ul>
  <li>app
  <ul>
  <li>css</li>
  <li>videogular
  <ul>
  <li>fonts
  <ul>
  <li>icomoon.eot</li>
  <li>icomoon.svg</li>
  <li>icomoon.ttf</li>
  <li>icomoon.woff</li>
  </ul></li>
  <li>videogular.css</li>
  </ul></li>
  <li>img</li>
  <li>js
  <ul>
  <li>videogular</li>
  <li>plugins
  <ul>
  <li>buffering.js</li>
  <li>controls.js</li>
  <li>overlay-play.js</li>
  <li>poster.js</li>
  </ul></li>
  <li>videogular.js</li>
  </ul></li>
  <li>lib </li>
  <li>partials</li>
  <li>videos</li>
  <li>views
  <ul>
  <li>videogular
  <ul>
  <li>plugins
  <ul>
  <li>buffering
  <ul>
  <li>buffering.html</li>
  </ul></li>
  <li>controls
  <ul>
  <li>controls.html</li>
  <li>full-screen-button.html</li>
  <li>mute-button.html</li>
  <li>play-pause-button.html</li>
  <li>volume-bar.html</li>
  </ul></li>
  <li>overlay-play
  <ul>
  <li>overlay-play.html</li>
  </ul></li>
  </ul></li>
  </ul></li>
  </ul></li>
  <li>index.html</li>
  </ul></li>
  </ul>
  
  <p>Now I'm certain I'm missing something but I can't see it. Any help?</p>