JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.firebase.com/js/client/2.2.3/firebase.js"></script>
<pre></pre>

JavaScript

var data = {
  dietplans : {
    plan1 : {
        template: true,
        name: "foo"
    },
    plan2 : {
        name: "baa"
    }
  }
};

var ref = new Firebase("https://stackoverflow.firebaseio.com/8460");
var log = document.getElementsByTagName("pre")[0];
//ref.set(data);

ref
  .child("dietplans")
  .orderByChild("template")
  .equalTo(true)
  .on("child_added", function(snapshot) {
      log.innerText += JSON.stringify(snapshot.val()) + "<br>";
      
    //  $scope.dietTemplates = snapshot.val(); - I also trid this but did not work
  });

$scope.dietTemplates = $firebaseArray(ref);  // This gets data back, but NOT the data that should be filtered by template = true;    So in this case only one record should be returned. But it is not working properly, in this example 2 records are being returned.