There is an object defined as:
$scope.allSessions = {
set: {},
pending: []
};
Subsequently, a method is used to populate the set property with multiple objects like this:
"2014-06-07-11-30": {
blah blah
}
This results in a list of dates being displayed (similar to the top part of an image).
To handle the removal of a date from the list and moving it to the pending "x session(s) not scheduled" section, a method is created. This method removes the entry from the set property and adds an entry to the pending array. Below is the method and the corresponding template:
$scope.makeSessionPending = function(session) {
// Add an entry in pending (only length is needed)
$scope.allSessions.pending.push({
length: session.length
});
// Remove from set sessions
delete $scope.allSessions.set[session.index];
};
<ul class="sessions">
<li ng-repeat="session in allSessions.set">
[[ session.dateString ]]
<span class="status" ng-class="session.status" ng-if="statusReceived"></span>
<span class="make-pending" ng-click="makeSessionPending(session)"><i class="icon icon-times"></i></span>
<span class="remove" ng-click="removeSession(session)"><i class="icon icon-trash-o"></i></span>
</li>
<li class="pending" ng-if="allSessions.pending.length">
<i class="icon icon-ellipsis-h"></i>
[[ allSessions.pending.length ]] session[[ (allSessions.pending.length == 1) ? '' : 's' ]] not scheduled
</li>
</ul>
The issue arises when the [[ allSessions.pending.length ]] does not update after the first time a session is made pending. Although the console log at the end of the makeSessionPending method displays the correct data, the template does not reflect the length change in the pending array.
In addition, it is observed that if the line in the HTML is inspected, it displays the correct information. Furthermore, highlighting the line causes it to update!?