title: Possibly unhandled rejection -- Error when creating a form with angularjs
body: <p>I created this simple web application to put data into a firebase database. The problem is that I get a error when I open the webpage in my browser. This is the error I get</p>
  
  <pre><code>Possibly unhandled rejection: {} angular.js:14324
  </code></pre>
  
  <p>Also when I press the sumbit button the first time with no data in the fields it displays the same error as shown above. Then when I press the button again it does submit the empty fields to the database. I think angular finds it a problem that the fields are empty. Am I missing something? Putting text in the fields works fine and it also submits to the database. It's just with empty fields that their are problems.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module("sampleApp", ["firebase"]);
  app.controller("SampleCtrl", function($scope, $firebaseArray) {
      var ref = firebase.database().ref().child("messages");
      $scope.loading = true;
      $firebaseArray(ref).$loaded().then(function(){
          $scope.loading = false;
          document.getElementById('loader').style.display = 'none';
      });
      $scope.messages = $firebaseArray(ref);
      $scope.addMessage = function() {
          $scope.messages.$add({
              name: $scope.name,
              company: $scope.company,
              reason: $scope.reason,
              wayofcontact: $scope.wayofcontact,
          });
          $scope.name = '';
          $scope.company = '';
          $scope.reason = '';
          $scope.wayofcontact = '';
          document.getElementById("name").focus();
      };
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="sampleApp"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;AngularJS Tutorial&lt;/title&gt;
      &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
      &lt;style&gt;
      [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
          display: none !important;
      }
      ul {
          list-style-type: none;
      }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body ng-controller="SampleCtrl" ng-cloak &gt;
      &lt;div class="container" ng-view&gt;
          &lt;div ng-show="loading"&gt;
              Loading...
          &lt;/div&gt;
          &lt;ul class="list-unstyled"&gt;
              &lt;li ng-repeat="message in messages | filter:{name: '!!'}"&gt;
                  &lt;h1&gt;{{message.name}}&lt;/h1&gt;
                  &lt;p&gt;
                      Bedrijf: {{message.company}}&lt;br&gt;
                      Reden: {{message.reason}}&lt;br&gt;
                      Email/telefoon: {{message.wayofcontact}}&lt;br&gt;
                  &lt;/p&gt;
                  &lt;button ng-click="messages.$remove(message)" class="btn btn-danger"&gt;Verwijder verzoek&lt;/button&gt;
                  &lt;br&gt;&lt;br&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;form ng-submit="addMessage()" novalidate&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-xs-6 form-group"&gt;
                      &lt;input type="text" class="form-control" id="name" ng-model="name" placeholder="Naam" autofocus required/&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-6"&gt;
                      &lt;input type="text" class="form-control" ng-model="namecolleague" placeholder="Naam collega" required/&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-12 form-group"&gt;
                      &lt;input type="text" class="form-control" ng-model="company" placeholder="Bedrijf" required/&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-12 form-group"&gt;
                      &lt;textarea rows="3" type="text" class="form-control" ng-model="reason" placeholder="Reden van bellen" required&gt;&lt;/textarea&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-12 form-group"&gt;
                      &lt;input type="text" class="form-control" ng-model="wayofcontact" placeholder="Email of nummer" required/&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-12 form-group"&gt;
                      &lt;button type="submit" class="btn btn-primary"&gt;Add Message&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;script type="text/javascript" src="https://www.gstatic.com/firebasejs/3.6.0/firebase.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://cdn.firebase.com/libs/angularfire/2.1.0/angularfire.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="scripts/app.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      // Initialize Firebase
      var config = {
          apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          authDomain: "xxxxxxxxxxxxxxxxxxxx",
          databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
          storageBucket: "xxxxxxxxxxxxxxxx",
          messagingSenderId: "xxxxxxxxxxx"
      };
      firebase.initializeApp(config);
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>