title: Ionic + firebase, error Module 'firebase' is not available
body: <p>I'm using the latest ionic and I want to implement a firebase backend for my app. I followed the ionic get started guide, then used bower install to install firebase and angular fire.</p>
  
  <p>The error produced is:</p>
  
  <pre><code>Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
  Error: [$injector:modulerr] Failed to instantiate module starter.controllers due to:
  Error: [$injector:modulerr] Failed to instantiate module firebase due to:
  Error: [$injector:nomod] Module 'firebase' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
  </code></pre>
  
  <p>So adding the firebase links to the index.html does not fix this issue at least for me. Using bower to install firebase it should bundle automatically just by passing in 'firebase' into the controller.js, however it produces this error. Any ideas? Thanks in advanced!</p>
  
  <p>This is all that I've changed in the app thus far:</p>
  
  <p><em>Index.html</em></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;link href="lib/ionic/css/ionic.css" rel="stylesheet"&gt;
      &lt;link href="css/style.css" rel="stylesheet"&gt;
  
      &lt;!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
      &lt;link href="css/ionic.app.css" rel="stylesheet"&gt;
      --&gt;
  
      &lt;!-- ionic/angularjs js --&gt;
      &lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt;
  
      &lt;!-- cordova script (this will be a 404 during development) --&gt;
      &lt;script src="cordova.js"&gt;&lt;/script&gt;
  
      &lt;!-- your app's js --&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
      &lt;script src="js/services.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body ng-app="starter" animation="slide-left-right-ios7"&gt;
      &lt;!-- 
        The nav bar that will be updated as we navigate between views.
      --&gt;
      &lt;ion-nav-bar class="bar-stable nav-title-slide-ios7"&gt;
        &lt;ion-nav-back-button class="button-icon icon  ion-ios7-arrow-back"&gt;
          Back
        &lt;/ion-nav-back-button&gt;
      &lt;/ion-nav-bar&gt;
      &lt;!-- 
        The views will be rendered in the &lt;ion-nav-view&gt; directive below
        Templates are in the /templates folder (but you could also
        have templates inline in this html file if you'd like).
      --&gt;
      &lt;ion-nav-view&gt;&lt;/ion-nav-view&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><em>app.js</em></p>
  
  <pre><code>angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
  
  .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      if(window.cordova &amp;&amp; window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      }
      if(window.StatusBar) {
        // org.apache.cordova.statusbar required
        StatusBar.styleDefault();
      }
    });
  })
  </code></pre>
  
  <p><em>controller.js</em></p>
  
  <pre><code>angular.module('starter.controllers', ['firebase'])
  
  .controller('DashCtrl', function ($scope, $firebase) {
  
    // TV Shows Table
    var moviesRef = new Firebase("https://moviehunt.firebaseio.com/");
    var sync = $firebase(moviesRef);
    $scope.movies = sync.$asArray();
  
  })
  </code></pre>