Firebase .push() Error and ng-model not working - angularjs

Question

I'm getting this error:
Error: Firebase .push failed: first argument contains undefined property 'price'
This is my controller:
angular.module('starter')
.controller('EditPicsController', function($scope,$location,$state) {
var itemsRef = new Firebase('https://myapp.firebaseio.com/items');
var itemprice = this.price
$scope.createItem = function(itemprice){
console.log(itemprice);
var newItemRef = itemsRef.push({'price':itemprice});
};
});
And my template:
<form>
<div class="list">
<label ng-model="price" class="item item-input item-stacked-label">
<span class="input-label">Price</span>
<input type="text" placeholder="$200.00" >
</label>
</div>
<button ng-click="createItem(price)" class='button button-dark'>
test-additem
</button>
</form>
my console.log output is blank.
What's going on here?

Answer 1

You should apply ng-model to input rather label.
<input ng-model="price" type="text" placeholder="$200.00" >
instead of
<label ng-model="price" class="item item-input item-stacked-label">
And in your code you've created a object of a class i.e. itemsRef. Its an object not an array. So because of this line itemsRef.push({'price':itemprice}); you're getting error. push is for arrays not for object.

Answer 2

You don't seem to use angularJS in its entirety.
As mentioned in the other answer you should set ng-model on input element rather than label because then you can leverage the angularJS philosophy of two-way data binding.
This is because user can interact with your client-side application in angularJS and can only change the value of HTML elements which are editable.
So those values are ng-model and will be binded to your controller and exposed through the glue called $scope in your controller.
So your HTML will be:
<form>
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">Price</span>
<input ng-model="price" type="text" placeholder="$200.00" >
</label>
</div>
<button ng-click="createItem()" class='button button-dark'>
test-additem
</button>
And your controller code:
angular.module('starter')
.controller('EditPicsController', function($scope,$location,$state) {
$scope.itemsRef = new Firebase('https://myapp.firebaseio.com/items');
$scope.createItem = function(){
var newItemRef = $scope.itemsRef.push({'price': $scope.price});
};
});
Also if your $scope.price is undefined then Firebase will complain because it wont allow you to save values which are undefined so set some Form validation or initialise the ng-model ($scope.price) with some value to test.
UPDATE: Your code $scope.itemsRef.push({'price': $scope.price}); for saving to Firebase is absolutely correct its just that Firebase doesn't like undefined in javascript so your model $scope.price needs to have a value to get this working

Answer 3

Since Firebase does not like undefined attributes like this:
item = { 'name': 'hot dog', 'price': undefined };
itemsRef.push(item);
I do a quick and dirty clean up of my objects before I push
for( let attr in item){
try {
if( item[attr] == undefined ) delete item[attr];
} catch(e){}
}
itemsRef.push(item);
which will push
{ 'name': 'hot dog' }
and firebase is happy :-) ..