Trouble getting Comment Form to POST - Angular App - angularjs

Question

I'm relatively new to Angular. I'm trying to get my comment form of this blog app to post comments and not just keep them in Javascript but via API POST to my database and store them there. I'm able to GET comments as well as other blog post information but for whatever reason I can't POST.
BlogService.js
angular.module('BlogService', [])
.factory('BlogService', ['$http', function($http) {
return {
// Call to GET Blog API
get : function() {
return $http.get('/api/blog');
},
// Call to GET Blog API via ID
show : function() {
return $http.get('/api/blog/' + id);
},
// Call to POST new data using Blog API
create : function(blogData) {
return $http.post('/api/blog', $scope.formData);
},
// Call to POST Comments in Blog API
createComment : function(commentData) {
return $http ({
method: 'POST',
url: '/api/blog/' + id + '/comments',
header: { 'content-type' : 'application/x-www-form-urlencode},
data: $.param(commentData)
});
},
// Call to PUT to update data using Blog API
update : function(id) {
return $http.put('/api/blog' + id);
},
// Call to DELETE data using Blog API
delete : function(id) {
return $http.delete('/api/blog/' + id);
}
}
}]);
CommentCtrl
To note, this CommentCtrl is a part of a larger BlogCtrl.js. I just separated it into its own controller. If it'll help, I can post the whole file.
...
.controller('CommentCtrl', ['$scope', '$http', 'BlogService', function($scope, $http, BlogService) {
this.commentData = {};
this.addComment = function(post) {
BlogService.createComment(this.commentData)
.success(function(data) {
this.commentData = {};
this.commentData.createdOn = Date.now();
post.comments.push(this.commentData);
this.commentData = {};
})
.error(function(data) {
console.log('Error: ' + data);
});
};
}]);
blog.html
The form is the part that I'm trying to POST. This is just a snippet of the markdown. Let me know if you would like to see the whole html file.
<div class="post" ng-repeat="post in blog.posts" ng-show="blog.isSelected($index)">
<div>
<h2>{{post.title}}</h2>
<img ng-src="{{post.image}}" ng-show="{{post.image}}"/>
<cite>by {{post.author}} on {{ post.createdOn | date:'medium' }}</cite>
<div class="post-body">
<p>{{post.body}}</p>
</div>
<div ng-controller="CommentCtrl as CmtCtrl">
<button class="icon-button" ng-click="post.likes = post.likes+1">
<i class="fa fa-thumbs-up"></i> {{post.likes}}
</button>
<button class="icon-button" ng-click="post.dislikes = post.dislikes+1">
<i class="fa fa-thumbs-down"></i> {{post.dislikes}}
</button>
<h3> Comments <h3>
<form class="form-style" name="commentForm" ng-submit="commentForm.$valid && CmtCtrl.addComment(post)" novalidate>
<h4> Add Comment: </h4>
<div>
<input type="text" class="comment-form form-control input-lg" name="body" ng-model="commentData.body" required placeholder="Please Leave Your Comment Here!"/>
</div>
<h4> Name: </h4>
<div>
<input type="text" class="comment-form form-control input-sm" name="author" ng-model="commentData.author" required placeholder="Name"/>
</div>
<div>
<button type="submit" class="btn comment-button button-style intro-social-buttons">Submit</button>
</div>
<!--<textarea class="comment-form" ng-model="CmtCtrl.comment.body" cols="30" rows="6" required></textarea></br>
<label for=""> <h4>Name:</h4> </label></br>
<input class="comment-form" type="text" ng-model="CmtCtrl.comment.author" required placeholder="Name"/></br>
<input class="btn comment-button button-style intro-social-buttons" type="submit" value="Submit"></br>-->
</form>
<ul>
<li ng-repeat="comment in post.comments">
"{{comment.body}}"
<cite>- <b>{{comment.author}}</b></cite>
</li>
</ul>
</div>
</div>
</div>
Also, to note that I use Mongoose and my schema allows body, author and date. I made it a nested array within my blog database as I wanted it to be attached to the individual blog post.
Let me know if there is anything else I can answer or give any other files.
Thanks