Angular js-Web page freezes after form submitted - html

Question

This is a project I'm doing to learn Angular JS. It's a single page web application that allows to log contacts and edit them. For some reason that I can't figure out, my web page freezes any time I post data to Firebase. Can anyone help with this?
This my javascript file
'use strict';
angular.module('myContacts.contacts', ['ngRoute','firebase'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/contacts', {
templateUrl: 'contacts/contacts.html',
controller: 'contactsCtrl'
});
}])
.controller('contactsCtrl', ['$scope','$firebaseArray', function($scope, $firebaseArray) {
var ref = firebase.database().ref();
$scope.contacts = $firebaseArray(ref);
//console.log($scope.contacts);
$scope.showAddForm = function(){
$scope.addFormShow = true;
}
$scope.hide = function(){
$scope.addFormShow = false;
}
$scope.addFormSubmit = function(){
console.log('adding contact');
//Assign values
if($scope.name){var name = $scope.name}else {name=null;}
if($scope.email){var email = $scope.email}else {email=null;}
if($scope.company){var company = $scope.company}else {company=null;}
if($scope.mobile_phone){var mobile_phone = $scope.mobile_phone}else { mobile_phone=null;}
if($scope.home_phone){var home_phone = $scope.home_phone}else {home_phone=null;}
if($scope.work_phone){var work_phone = $scope.work_phone}else {work_phone=null;}
if($scope.street_address){var street_address = $scope.street_address}else {street_address=null;}
if($scope.city){var city = $scope.city}else {city=null;}
if($scope.province){var province = $scope.province}else {province=null;}
if($scope.postal_code){var postal_code = $scope.postal_code}else {postal_code=null;}
//Build Object
$scope.contacts.$add({
name:name,
email:email,
company:company,
phone:[
{
mobile:mobile_phone,
home:home_phone,
work:work_phone
}
],
address:[
{
street_address:street_address,
city: city,
province: province,
postal_code: postal_code
}
]
}).then(function(ref){
var id = ref.key();
console.log('added contact with id: '+ id);
//clear form
clearFields();
hide form
$scope.addFormShow = false;
//send message
$scope.msg ="contact Added";
});
}
//Clear $scope Fields
function clearFields(){
console.log('Clearing All Fields');
$scope.name = '';
$scope.email = '';
$scope.company = '';
$scope.mobile_phone = '';
$scope.home_phone = '';
$scope.work_phone = '';
$scope.street_address = '';
$scope.city = '';
$scope.province = '';
$scope.postal_code = '';
}
}]);
and here is the HTML file
<div class="row" ng-controller="contactsCtrl">
<div class="large-10 columns">
<!--<div data-alert ng-show="msg" class="alert-box">{{msg}}</div>-->
<form ng-submit="addFormSubmit()" ng-show="addFormShow">
<h3>Add Contact</h3>
<!--Add Form-->
<div class="row">
<div class="large-6 columns">
<label>Name:
<input type="text" ng-model="name" placeholder="Contact Name" required/>
</label>
</div>
<div class="large-6 columns">
<label>Email:
<input type="text" ng-model="email" placeholder="Contact Email" required/>
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Company:
<input type="text" ng-model="company" placeholder="Company Name"/>
</label>
</div>
<div class="large-6 columns">
<label>Work Phone:
<input type="text" ng-model="work_phone" placeholder="Work Phone"/>
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Mobile Phone:
<input type="text" ng-model="mobile_phone" placeholder="Mobile Phone" />
</label>
</div>
<div class="large-6 columns">
<label>Home Phone:
<input type="text" ng-model="home_phone" placeholder="Mobile Phone"/>
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Street Address:
<input type="text" ng-model="street_address" placeholder="Street Name"/>
</label>
</div>
<div class="large-6 columns">
<label>City:
<input type="text" ng-model="city" placeholder="City"/>
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Province:
<input type="text" ng-model="state" placeholder="Province"/>
</label>
</div>
<div class="large-6 columns">
<label>Postal Code:
<input type="text" ng-model="postal_code" placeholder="Postal Code"/>
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="submit" value="Add Contact" class="button"/>
</div>
</div>
</form>
<h3>Your Contacts (3)</h3>
<table>
<thead>
<tr>
<th width="200px">Name</th>
<th width="200px">Company</th>
<th width="25%">Email</th>
<th width="25%">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts">
<td>{{contact.name}}</td>
<td>{{contact.company}}</td>
<td>{{contact.email}}</td>
<td><a class="button tiny" ng-click="showEditForm(contact)">Edit</a><a class="button tiny alert" ng-click="removeContact(contact)">Delete</a></td>
</tr>
</tbody>
</table>
</div>
<div class="small-12 large-2 columns">
<a class="button large" ng-click="showAddForm()" ng-hide="addFormShow">+</a>
<a class="button large" ng-click="hide()" ng-show="addFormShow">-</a>
</div>
</div>

Answer 1

While checking your code I have the feeling that you are probably not initializing the firebase module.
So you should do it first
Config firebase.initializeApp() or it will not work
.config(function () {
var config = {
apiKey: "",
authDomain: "",
databaseURL: "",
storageBucket: "",
messagingSenderId: ""
};
firebase.initializeApp(config);
});
Check this example, please use your own firebase initialization info to make it work I made your code work on muy test.
Example: https://jsfiddle.net/moplin/zLozccap/