title: How to display data retrieved from Firebase to AngularJS App
body: <p>I have an angular application that is receiving data from firebase but I don't know how to display the data in the view. The data retrieved from firebase is an Object having 3 Objects with these names: KoAJWEHt6E2krjLgSuB,KoAJWEPc0seRt95JqoH,KoAJWEQDiAsOWwvL2QZ (these names are the unique keys assigned by firebase). These 3 objects hold data for classifieds of each person. Now I don't know how to display this data in the view.I have already tried ng-repeat but it doesn't show anything and there is no error in the console.</p>
  
  <p>Controller:</p>
  
  <pre><code>myApp.controller("classifiedsCtrl",["$scope","$http","$mdSidenav","$mdToast","$mdDialog","$firebaseArray",function($scope,$http,$mdSidenav,$mdToast,$mdDialog,$firebaseArray){
        var ref=firebase.database().ref().child('persons');
        ref.on('value',function(snapshot){
        $scope.classifieds=snapshot.val();
        console.log($scope.classifieds);
     });
  }]);
  </code></pre>
  
  <p>Controller View:</p>
  
  <pre><code>&lt;md-card flex="30" ng-repeat="classified in classifieds | filter:classifiedsFilter" class="record"&gt;
   &lt;md-card-content&gt;
      &lt;div class="classified-info" ng-show="!showContact"&gt;
          &lt;h2 class="md-title"&gt;{{classified.title | uppercase}}&lt;/h2&gt;
          &lt;h3&gt;{{classified.price | currency}}&lt;/h3&gt;
          &lt;p&gt;{{classified.description}}&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="classified-contact" ng-show="showContact"&gt;
          &lt;p&gt;
            &lt;md-icon class="mdi mdi-account"&gt;&lt;/md-icon&gt;{{classified.name}}&lt;/p&gt;
          &lt;p&gt;
            &lt;md-icon class="mdi mdi-phone"&gt;&lt;/md-icon&gt;{{classified.phone}}&lt;/p&gt;
      &lt;/div&gt;
       &lt;div layout="row"&gt;
             &lt;md-button ng-click="showContact=true" ng-show="!showContact"&gt;Contact&lt;/md-button&gt;
             &lt;md-button ng-click="showContact=false" ng-show="showContact"&gt;Details&lt;/md-button&gt;
             &lt;md-button ng-click="showAdmin=true" ng-show="!showAdmin"&gt;Admin&lt;/md-button&gt;
             &lt;md-button ng-click="showAdmin=false" ng-show="showAdmin"&gt;Close&lt;/md-button&gt;
       &lt;/div&gt;
       &lt;div class="classified-admin" ng-if="showAdmin"&gt;
            &lt;h3&gt;Admin&lt;/h3&gt;
            &lt;div layout="row"&gt;
                &lt;md-button class="md-raised md-primary"&gt;Edit&lt;/md-button&gt;
                      &lt;md-button ng-click="deleteClassified($event,classified)" class="md-raised md-warn"&gt;Delete&lt;/md-button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/md-card-content&gt;
      &lt;/md-card&gt;
  </code></pre>