Angularjs firebase ng-click loading values after two-three clicks - angularjs

Question

I have angularjs file
<div class="container starter-template">
<div class="col-md-9" >
<select ng-model="selectedName" ng-options="x as x.TeamName for x in teams" ng-change="selectedItemChanged()">
<option value="">Select Team</option>
</select>
</div>
<div class="col-md-3">{{date}} </div>
<hr>
<!-- <div ng-repeat="s in user">
<div ng-repeat="(key, value) in s">
{{selectedName.FirstName}} : {{value["Date"]}} {{value["TimeStamp"]}} {{value["Status"]}}
</div>
</div>-->
<div class="box box-default" style="width:1100px">
<div class="box-header with-border">
<h3 class="box-title">Employee Details </h3>
<div class="row" >
<br/>
<div class="col-lg-3 col-xs-6" ng-repeat="name in fullName">
<!-- small box -->
<div class="small-box bg-aqua" style="height:130px;width:150px;" >
<div class="inner">
<h3></h3>
</div>
<div class="icon">
<i class="ion ion-person" ></i>
</div>
<button ng-click="info(name)" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">More Info
<i class="fa fa-arrow-circle-right"></i>
</button><br/><br/>
<center><b><p >{{name}}</p></b></center>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{name}}</h4>
</div>
<div class="modal-body">
<p>Clock In : {{clock_in}}</p>
<p>Clock Out : {{clock_out}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box box-default" style="width:1100px">
<div class="box-header with-border">
<h3 class="box-title">Clock In</h3>
<div class="row" >
</div>
</div>
</div>
<div class="box box-default" style="width:1100px">
<div class="box-header with-border">
<h3 class="box-title">Clock Out</h3>
<div class="row" >
</div>
</div>
</div>
<div id="inOut-container">FusionCharts will render here</div>
<div id="attendance-container">FusionCharts will render here</div>
</div>
and a javascript file:
app.controller('organization_drill_down', ['$scope', '$firebaseArray', '$firebaseObject', 'FBURL', function($scope, $firebaseArray, $firebaseObject, FBURL){
//current date
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();
if(dd<10){dd='0'+dd}
if(mm<10){mm='0'+mm}
$scope.date = dd+'/'+mm+'/'+yyyy;
$scope.all_ins = [];
$scope.all_outs = [];
var teams = new Firebase("************");
var time_stamps = new Firebase("*************") //collecting team's data
$scope.teams = $firebaseArray(teams); //teams for select dropdown
$scope.team = [];
$scope.uId = [];
$scope.in = 0;
$scope.out = 0;
$scope.selectedItemChanged = function() {
console.log($scope.selectedName.TeamName);
var ref = new Firebase("**************").orderByChild('TeamName')
.equalTo($scope.selectedName.TeamName) //check if selected team's name matches users
.on('value', function(snap) {
$scope.fullName = [];
$scope.user = snap.val();
angular.forEach($scope.user, function(user,user_key) {
$scope.fullName.push(user["FirstName"]+" "+user["LastName"]);
});
$scope.$digest();
});
};
//info on clicking more info for a specific user
$scope.info = function(name) {
var users = new Firebase("********************");
var name = name.split(" ");
console.log(name);
users.orderByChild('FirstName').equalTo(name[0]) //check if selected team's name matches users
.on('value', function(snap) {
$scope.user = snap.val();
angular.forEach($scope.user, function(user,user_key) {
if(user["LastName"] == name[1]) //checking if firstname and lastname are equal afterbutton click in user node
{
time_stamps.orderByKey()
.equalTo(user_key) //check if selected name's key is in timestamps
.on('value', function(snap) {
$scope.time_stamp = snap.val();
angular.forEach($scope.time_stamp, function(value, key) {
angular.forEach(value, function(value1, key) {
if(value[key]["Date"] == $scope.date ){
if(value[key]["Status"]== "In"){
$scope.all_ins.push(value[key]["TimeStamp"]);
}
else{
$scope.all_outs.push(value[key]["TimeStamp"]);
}
}
});
});
$scope.clock_in = $scope.all_ins[0];
$scope.clock_out = $scope.all_outs.pop();
});
}
});
$scope.$digest();
});
};
}]);
What I want is: on clicking the button "more info" should open a popup and call the function info(name) and return clock-in and clock out. But what is happening is, on clicking the button ng-click is hitting info(name) but after two-three clicks that is information is not loading directly. I am caught with such unusual error first time, can somebody help?
When clicking first time on button "more info":
after clicking second/third time on the button "more info":

Answer 1

Seems like (from what I could gather with identation and some observation) you are updating your variables outside of the users.orderByChild().equalTo().on part.
Firebase functions (like the one you used) are always promises and, in this case, the promise will end and then on('value', function(snap){ will run.
Since it is an async promise, you might be saving empty values to the variables you wanted to use in the modal. After trying a couple more times it ends up giving the promise enough time to execute so you get your correct values.
Also, bear in mind that using on will add a listener to that firebase node (on the condition of 'value' change) that will run whatever code you put inside it every time the condition is satisfied (not just the first time you call the code).