Is there a difference between .add() in AngularJS vs. DOM? - dom

Question

Is there a difference between the .add() method in AngularJS and DOM? I'm using .add() in an AngularJS application and I'm running into *issues pushing data to a firebase. When I go to look at the documentation to do some research I found nothing in the AngularJS docs about this method. I found that .add() in DOM is for adding an option to a select (eg Object_of_Select.add(option, before);). But this doesn't really translate IMO to how I'm using it in AngularJS.
*The Issue I'm experiencing:
I have no problem with Firebase and persisting data, its super straightforward and awesome. I run into problems however, when I take an object (in this example "campaign") and push objects into a nested array of objects ("tactics"). The second I add local data, I can no longer "add" that data to the Firebase. No errors, just nothing.
So if anyone could point me in the right direction it would be super.
TEMPLATE
<!-- TITLE THE CAMPAIGN -->
<h3>{{campaign.name}}</h3>
<input type="text" placeholder="Campaign Title" ng-model="campaign.name"/>
<!-- LOOP THROUGH TACTICS -->
<div class="well well-lg" ng-repeat="foo in campaign.tactics">
<h4>{{foo.name}} - {{foo.type}}</h4>
</div>
<!-- SELECT TACTIC TYPE (Loaded from separate Firebase instance)-->
<select ng-model="tacticSelect">
<option ng-repeat="tactic in tactics" value="{{tactic.name}}">{{tactic.name}} ({{tactic.type}})</option>
</select>
<!-- PUSH NEW TACTICS INTO TACTIC LOOP -->
<button class="btn" ng-click="campaign.tactics.push({'name': tacticSelect, 'type': 'email'})"><span class="glyphicon glyphicon-plus" ></span> Add Tactic</button>
<!-- SAVE CAMPAIGN TO CAMPAIGNS FIREBASE -->
<button class="btn btn-success" ng-click="campaigns.add(campaign)"></span> Save</button><!-- ng-click="campaigns.add(campaign)"-->
CONTROLLER
function scopeAssignments($scope, angularFireCollection, $location){
$scope.tactics = angularFireCollection(fbTactics);
$scope.campaigns = angularFireCollection(fbCampaigns);
// SAMPLE DATA SET
$scope.campaign = {"tactics" : []};
}
DESIRED DATA STRUCTURE (I'm trying to create campaigns that can have multiple tactics with in a single campaign.)
$scope.campaign = {
"name" : "Sample Campaign",
"tactics" : [{
"name" : "First Tactic",
"type" : "Email"
}]
};

Answer 1

add is neither an Angular method nor a DOM method. It's a method provided by an angularFireCollection. angularFireCollection synchronizes data explicitly, which means that calling $scope.campaigns.tactics.push is not sufficient to send that data to Firebase.
You essentially have two options. You can use the angularFire service which will automatically synchronize data whenever it changes locally.
CONTROLLER
function scopeAssignments($scope, angularFire){
$scope.tactics = angularFire(fbTactics);
$scope.campaigns = angularFire(fbCampaigns);
$scope.campaign = $scope.campaigns[campaignID];
$scope.campaign.tactics = [];
}
If you want to stick with angularFireCollection, you have to explicitly notify the collection when you want some data sent to the Firebase server. You can do this, for example, by:
TEMPLATE
<!-- PUSH NEW TACTICS INTO TACTIC LOOP -->
<button class="btn" ng-click="addTactic(campaign, tacticSelect)">
<span class="glyphicon glyphicon-plus"></span> Add Tactic
</button>
CONTROLLER
$scope.addTactic = function(campaign, tactic) {
$scope.campaign.tactics.push({'name': tacticSelect, 'type': 'email'});
$scope.campaigns.update($scope.campaign);
}