title: How to persist a success icon in the view after modal function with AngularJS and UI-Bootstrap? (Plunker)
body: <p>I'm making something that works similarly to <a href="https://plnkr.co/edit/rZTnqBMly9w7oG9II7PM?p=preview" rel="nofollow noreferrer">this plunker</a> that I created.</p>
  
  <p>In my app I'm using Firebase/AngularFire.</p>
  
  <p>In the plunker you can see that when you check-in to a meeting, the icon changes to a success icon. In my app this is where I store that info in Firebase like this:</p>
  
  <pre><code>$scope.join = function(hash) {
          console.log(hash);
  
          var ref = dbRef.ref('meetings/'+hash+'/users')
  
          var meetingInfo = $firebaseArray(ref);
  
          meetingInfo.$add({
              date: firebase.database.ServerValue.TIMESTAMP,
              user_name: $scope.name,
              user: $scope.currentUser
          }).then(function(ref) {
              var key = ref.key;
              var index = meetingInfo.$indexFor(key);
              console.log(key, index);
  
              $uibModalInstance.close();
          });
      };
  </code></pre>
  
  <p>So the data gets added into Firebase and then the modal closes.</p>
  
  <p>I also have a similar controller and view for listing out the meetings just like in the plunker.</p>
  
  <p>In the plunker I send a variable through <code>$rootScope</code> so it's accessible in the <code>listingController</code>. That works, but as you can see I can only check-in to one meeting, and after I refresh or check-in to another meeting, the check-mark disappears. </p>
  
  <p>I would like to know how to persist this change so that anytime I check-in to a meeting the check-mark will stay. I'm thinking that I need to edit something in my listing controller so that when it grabs the data, it can check to see if someone has checked in to the meeting, and display the checkmark, so here is my Firebase list controller:</p>
  
  <pre><code>app.controller('listController', ['$scope', '$rootScope', '$firebaseArray', '$firebaseObject', '$uibModal', function($scope, $rootScope, $firebaseArray, $firebaseObject, $uibModal) {
      var ref = firebase.database().ref('meetings');
  
      var list = $firebaseObject(ref);
  
      list.$loaded().then(function(data) {
          $scope.lobbies = list;
      });
  
  }]);
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>The way Firebase stores the data is like this:</p>
  
  <pre><code>---meetings
  ------random hash (key)
  ---------date
  ---------name
  ---------attendees
  ------------random hash
  ---------------date
  ---------------name
  </code></pre>
  
  <p>When I do my ng-repeat it's like this: <code>ng-repeat="(key, meeting) in meetings"</code> so I can access the meeting data like <code>meeting.name</code>. How should I go about accessing the attendees to check if the current user is in the meeting?</p>
  
  <p><strong>SOLUTION</strong></p>
  
  <p><a href="https://stackoverflow.com/questions/31868286/accessing-nested-unique-key-values-in-firebase">This question</a> helped me out a lot in addition to the HTML snippet that idan provided</p>