title: Pushing and getting data from Firebase in AngularJS Factories
body: <p>I am trying to store and retrieve my data on firebase using AngularJS. I have built so far an <strong>Ionic tabs</strong> project and created a custom controller and custom factory. I understand that it is a convention to retrieve the data in a factory and handle it through the controllers. However, I don't understand why my following code does not work:</p>
  
  <p><strong>services.js</strong></p>
  
  <pre><code>angular.module('starter.services', ['firebase'])
  
  .factory('OtherFriends', ['$firebase', function ($firebase) {
  
    var ref = new Firebase("https://example1234.firebaseio.com/friendlist");
    var sync = $firebase(ref);
  
    var otherfriends = sync.$asArray();
  
    return {
      all: function() {
        return otherfriends;
      },
      get: function(friendId) {
        // Simple index lookup
        return otherfriends[friendId];
      }
    }
  }])
  </code></pre>
  
  <p><strong>controllers.js</strong></p>
  
  <pre><code>angular.module('starter.controllers', [])
  
  // OTHER CONTROLLERS
  
  .controller('OtherFriendsCtrl', function($scope, OtherFriends) {
    $scope.otherfriends = OtherFriends.all();
  })
  </code></pre>
  
  <p><strong>tab-otherfriends.html</strong></p>
  
  <pre><code>&lt;ion-view title="OtherFriends"&gt;
    &lt;ion-content&gt;
      &lt;ion-list&gt;
        &lt;ion-item ng-repeat="otherfriend in otherfriends" type="item-text-wrap" href="#/tab/otherfriend/{{otherfriend.id}}"&gt;
          {{otherfriend.name}}
        &lt;/ion-item&gt;
      &lt;/ion-list&gt;
    &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'firebase'])
  
  // OTHER STANDARD IONIC CODE
  
  .config(function($stateProvider, $urlRouterProvider) {
  
    // Ionic uses AngularUI Router which uses the concept of states
    // Learn more here: https://github.com/angular-ui/ui-router
    // Set up the various states which the app can be in.
    // Each state's controller can be found in controllers.js
    $stateProvider
  
      // setup an abstract state for the tabs directive
      .state('tab', {
        url: "/tab",
        abstract: true,
        templateUrl: "templates/tabs.html"
      })
  
      .state('tab.otherfriends', {
        url: '/otherfriends',
        views: {
          'tab-otherfriends': {
            templateUrl: 'templates/tab-otherfriends.html',
            controller: 'OtherFriendsCtrl'
          }
        }
      })
  
    // OTHER TABS
  
    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/tab/dash');
  
  });
  </code></pre>
  
  <p><strong>index.html</strong></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;!-- firebase (loaded after ionic bundle) --&gt;
      &lt;script src="https://cdn.firebase.com/js/client/1.0.17/firebase.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.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><strong>And the data in Firebase.io (imported .JSON file):</strong></p>
  
  <pre><code>{"friendlist":[
      {"firstName":"John", "lastName":"Doe"}, 
      {"firstName":"Anna", "lastName":"Smith"},
      {"firstName":"Peter", "lastName":"Jones"}
  ]}
  </code></pre>