angularProject/app/controllers/SelectMenuPageController.js

app.controller('SelectMenuPageController',['$scope','$firebaseObject','$timeout',function($scope,$firebaseObject,$timeout){
  var ref = firebase.database().ref().child('meals');
  // var fireObj = $firebaseObject(ref);keys[i]
  // var mealItems = fireObj.first;
  // fireObj.$loaded().then(function(result){
  //   console.log(result.first);
  // })
  $scope.mealType = 'breakfast';
  $scope.meals = [];
  $scope.selectMeal = function(i){
    var keys = Object.keys($scope.meals);
    $scope.meals[keys[i]].isSelected = true;
    ref.child(keys[i]).set($scope.meals[keys[i]]);
  }
  ref.on('value', snap => {
    // var databaseT0ests = [];
    // var retrievedObject = snap.val();
    // if(retrievedObject){
    //   var keys = Object.keys(retrievedObject);
    //   for (var i = 0; i < keys.length; i++) {
    //     databaseTests[i] = retrievedObject[keys[i]];
    //   }
    // }
    $timeout(function(){
      $scope.meals = snap.val();
    })
  })

  $scope.openSelectedMeals = function(){
    var selectedMeals = angular.element(document.querySelector('.selected-meals'));
    var appRoot = angular.element(document.querySelector('.app-root'));
    var overlay2 = angular.element(document.querySelector('.overlay2'));
    // selectedMeals.css({'transform': 'translateX(0)'})
    appRoot.css({'transform': 'translateX(-281px)'});
    overlay2.css({'pointer-events': 'auto','opacity':'1'});
    overlay2.on('click',function(){
      overlay2.css({'pointer-events': 'none','opacity':'0'});
      appRoot.css({'transform': 'translateX(0px)'});
    })
  }

}])