title: Add records to existing Firebase Datamodel with Angularjs
body: <p>I have been scrambling my brains for hours trying to implement this code in the <a href="https://www.firebase.com/docs/web/guide/saving-data.html" rel="nofollow">Firebase Documentation</a> with my own solution.</p>
  
  <p>I have a Posts.json as a data source in Firebase with the following structure example:</p>
  
  <pre><code>{
  Title: "Cheese Fondling",
  
  Body: "I love cheese, especially paneer mozzarella. Roquefort cheeseburger cut the cheese fondue edam taleggio cheese slices gouda. Dolcelatte croque monsieur cottage cheese camembert de normandie cheese slices st. agur blue cheese bavarian bergkase swiss. Edam cheesecake parmesan.",
  }
  </code></pre>
  
  <p>I am not sure if I need to update its records via set() as the file already exists but as it does not work I attempted with Push, which still does not work.</p>
  
  <p>My HTML form view looks as follows:</p>
  
  <pre><code>      &lt;form class="form-horizontal" ng-submit="AddPost()"&gt;
              &lt;fieldset&gt;
  
                  &lt;!-- Form Name --&gt;
                  &lt;legend&gt;{{addp.title}}&lt;/legend&gt;
  
                  &lt;!-- Text input--&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label class="col-md-4 control-label" for="txtTitle"&gt;Title&lt;/label&gt;
                      &lt;div class="col-md-4"&gt;
                          &lt;input id="txtTitle" name="txtTitle" type="text" placeholder="placeholder" class="form-control input-md"  ng-model="post.Title"&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;!-- Textarea --&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label class="col-md-4 control-label" for="txtPost"&gt;Post&lt;/label&gt;
                      &lt;div class="col-md-4"&gt;
                          &lt;textarea class="form-control" id="txtPost" name="txtPost"  ng-model="post.Body"&gt;&lt;/textarea&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;!-- Button --&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label class="col-md-4 control-label" for="singlebutton"&gt;&lt;/label&gt;
                      &lt;div class="col-md-4"&gt;
                          &lt;input id="singlebutton" ng-disabled="!post.Title || !post.Body" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/fieldset&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p>The controller is added separately via state:</p>
  
  <pre><code>  .state('AddPost', {
        url: '/blog',
        controller: 'AddPostCtrl as addp',
        templateUrl: 'blog.html',
        title: 'Blog'
      })
  </code></pre>
  
  <p>This is the controller code:</p>
  
  <pre><code>    controllersModule.controller('AddPostCtrl', ["$scope", '$firebaseArray',
        function($scope, $firebaseArray){
           $scope.AddPost = function() {
  
     var title = $scope.post.Title;
     var post = $scope.post.Body;
     $scope.refPosts = postsArray;
  
     var ref = new Firebase('https://&lt;DATASOURCE&gt;.firebaseio.com/');
     var refPosts = ref.child("Posts")
     var postsArray = $firebaseArray(refPosts);
  
     postsArray.$add({ Title: Title, Body: Body }).then(function(ref) {
          console.log(ref);
          console.log("It worked");
      }, function(error) {
          console.log("Error:", error);
          console.log("It did not work");
      });
  }
      }]);
  </code></pre>
  
  <p>EDITED ABOVE. AND ALSO ADDED THIS IN THE POSTS VIEW:</p>
  
  <pre><code>&lt;div class="meeting" ng-repeat="post in refPosts"&gt;
      &lt;h5&gt;{{post.Title}}&lt;/h5&gt;
      &lt;p&gt;{{post.Body}}&lt;/p&gt;
  
  &lt;/div&gt;
  </code></pre>