title: Attempting to Upload Form Data from Angularjs to Firebase Does Not Work
body: <p>I created a form using AngularJS and Bootstrap and it also has form validation from Angular. Now I am trying to upload the form data to Firebase. I have tried adding ng-controllers to the form and it breaks the validation and the date picker. I tried following the instructions from this post (<a href="https://stackoverflow.com/questions/20929515/submitting-data-from-text-box-to-firebase-not-working">Submitting data from text box to Firebase not working</a>) and adapting it for my needs but no luck. Any solutions? Here's my code.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="form"&gt;
  &lt;head&gt;
  &lt;script src="https://cdn.firebase.com/js/client/1.0.11/firebase.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.firebase.com/v0/firebase.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"&gt;&lt;/script&gt;
  &lt;script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"&gt;&lt;/script&gt;
  &lt;script src="js.js"&gt;&lt;/script&gt;
  &lt;link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;link href="style.css" rel="stylesheet"&gt;
  
   &lt;/head&gt;
  
  
     &lt;body&gt;
  
    &lt;h2&gt;Planning Your Next Rush Event?&lt;/h2&gt;
    &lt;h5&gt; Describe Your Event Here!&lt;/h5&gt;
  
  
  
  
    &lt;form name="form" role="form" id="contact"&gt;
  
        &lt;div class="control-group form-group" ng-class="{true: 'error'}[submitted &amp;&amp; form.name.$invalid &amp;&amp; form.name.$error.minlength]"&gt;
  
      &lt;label 
      class="control-label" 
      for="name"&gt;Event Name&lt;/label&gt;
      &lt;div class="controls"&gt;
          &lt;input class="form-control .col-md-8" id="eventname" type="text" name="name" ng-minlength="3" ng-model="name" required /&gt;
          &lt;span class="help-inline" ng-show="submitted &amp;&amp; form.name.$error.required"&gt;Required&lt;/span&gt;
          &lt;span class="help-inline" ng-show="submitted &amp;&amp; form.name.$error.name"&gt;Invalid Name&lt;/span&gt;
          &lt;span class="help-inline" ng-show="submitted &amp;&amp; form.name.$error.minlength"&gt;Needs at least 3 characters&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="control-group form-group" ng-class="{true: 'error'}[submitted &amp;&amp; form.hostname.$invalid &amp;&amp; form.name.$error.minlength]"&gt;
      &lt;label class="control-label" for="hostname"&gt;Host Name&lt;/label&gt;
      &lt;div class="controls"&gt;
          &lt;input class="form-control .col-md-8" type="text" id="hostname" name="hostname" ng-minlength="3" ng-model="user.name" required /&gt;
          &lt;span class="help-inline" ng-show="submitted &amp;&amp; form.hostname.$error.required"&gt;Required&lt;/span&gt;
          &lt;span class="help-inline" ng-show="submitted &amp;&amp; form.hostname.$error.minlength"&gt;Name Must Contain At Least 3 Characters&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
      &lt;div class="control-group form-group" ng-class="{true: 'error'}[submitted &amp;&amp; form.desc.$invalid &amp;&amp; form.desc.$error.minlength]"&gt;
      &lt;label class="control-label" for="desc"&gt;Event Description&lt;/label&gt;
      &lt;div class="controls"&gt;
          &lt;textarea  class="form-control .col-md-8" rows="4" type="text" name="desc" ng-minlength="10" ng-model="text" required &gt;&lt;/textarea&gt;
          &lt;span class="help-inline" ng-show="submitted &amp;&amp; form.desc.$error.required"&gt;Required&lt;/span&gt;
          &lt;span class="help-inline" ng-show="submitted &amp;&amp; form.desc.$error.minlength"&gt;Needs at least 10 characters&lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div ng-controller="DatePicker" class="control-group" ng-class="{true: 'error'}[submitted &amp;&amp; form.dateinput.$error.date]"&gt;
  
      &lt;label 
      class="control-label" 
      for="dateinput"&gt;Event Date&lt;/label&gt;
      &lt;div class="controls form-group"&gt;
  
          &lt;p class="input-group"&gt;
            &lt;input class="form-control .col-md-8" type="date" datepicker-popup="{{format}}" name="dateinput" ng-model="value" is-open="opened" min="2014-04-30" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" close-text="Close" required /&gt;
  
            &lt;span class="input-group-btn"&gt;
              &lt;button class="btn btn-default" ng-click="open($event)"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;/span&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  
          &lt;span class="help-inline" ng-show="submitted &amp;&amp; form.dateinput.$error.required"&gt;Required&lt;/span&gt;
          &lt;span class="help-inline" ng-show="submitted &amp;&amp; form.dateinput.$error.date"&gt;Not Valid Date&lt;/span&gt;
      &lt;/div&gt;
  
  
  
  
   &lt;div class="control-group form-group" ng-class="{true: 'error'} [submitted &amp;&amp; form.time.$error.time]"&gt;
  
      &lt;label 
      class="control-label" 
      for="time"&gt;Event Time&lt;/label&gt;
      &lt;div class="controls"&gt;
  
          &lt;input class="form-control .col-md-8"type="time" name="time" 
     min="06:00" max="12:00" required /&gt;
          &lt;span class="help-inline" ng-show="submitted &amp;&amp; form.time.$error.required"&gt;Required&lt;/span&gt;
          &lt;span class="help-inline" ng-show="submitted &amp;&amp; form.time.$error.time"&gt;Invalid Time&lt;/span&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="control-group form-group" ng-class="{true: 'error'}[submitted &amp;&amp; form.address.$invalid]"&gt;
      &lt;label class="control-label" for="address"&gt;Address&lt;/label&gt;
      &lt;div class="controls"&gt;
          &lt;input class="form-control .col-md-8" type="text" name="address" ng-model="textarea" required /&gt;
          &lt;span class="help-inline" ng-show="submitted &amp;&amp; form.address.$error.required"&gt;Required&lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;button type="submit" class="btn btn-primary btn-large submit" ng-click="submitted=true"&gt;Submit&lt;/button&gt;
   &lt;/form&gt;
  
     &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  
  <p>This is my Javascript</p>
  
  <pre><code> angular.module('form', ['ui.bootstrap']);
    function Controller($scope) {
  $scope.master = {};
  
  $scope.update = function(user) {
    $scope.master = angular.copy(user);
  };
  
  $scope.reset = function() {
    $scope.user = angular.copy($scope.master);
  };
  
  $scope.reset();
   };
  
  
  
  
   var DatePicker = function ($scope) {
  
  
   $scope.toggleMin = function() {
     $scope.minDate = ( $scope.minDate ) ? null : new Date();
    };
    $scope.toggleMin();
  
     $scope.open = function($event) {
     $event.preventDefault();
     $event.stopPropagation();
  
     $scope.opened = true;
     };
  
     $scope.dateOptions = {
     'year-format': "'yy'",
     'starting-day': 1
     };
  
     };
  
  
  
     var url = "https://shekinah.firebaseio.com";
     var firebaseRef = new Firebase(url);
  
    function funct1(event)
    {
     var name = $("#eventname").val();
     var eventhost = $("#hostname").val();
     var date = Date();
     firebaseRef.push({Name: name, Eventhost: eventhost, Date: date});
     event.preventDefault();
      }
  
  
    $("#contact").submit();
  </code></pre>