title: AngularJS Form data is not defined
body: <p>In AngularJS, I have a form, that when submitted, passes data off to a controller and sends it to an API.</p>
  
  <p>Form:</p>
  
  <pre><code> &lt;form ng-submit="newCompany()"&gt;
              &lt;div class="form-group" ng-controller="CompaniesController"&gt;
                  &lt;label&gt;ID&lt;/label&gt;&lt;input type="text" name="id" id="id" ng-model="newCompany.id" tabindex="1" class="form-control"&gt;
                  &lt;label&gt;Name&lt;/label&gt;&lt;input type="text" name="name" id="name" tabindex="2" ng-model="newCompany.name" class="form-control"&gt;
                  &lt;label&gt;Primary Contact&lt;/label&gt;&lt;input type="text" name="primary_contact" id="primary_contact" tabindex="2" ng-model="newCompany.primary_contact" class="form-control"&gt;
                  &lt;label&gt;Address&lt;/label&gt;&lt;input type="text" name="address" id="address" tabindex="2" ng-model="newCompany.address" class="form-control"&gt;
                  &lt;label&gt;Function&lt;/label&gt;&lt;input type="text" name="function" id="function" tabindex="2" ng-model="newCompany.function" class="form-control"&gt;
                  &lt;label&gt;Telephone&lt;/label&gt;&lt;input type="text" name="telephone" id="telephone" tabindex="2" ng-model="newCompany.phone" class="form-control"&gt;
                  &lt;label&gt;Fax&lt;/label&gt;&lt;input type="text" name="fax" id="fax" tabindex="2" ng-model="newCompany.fax" class="form-control"&gt;
                  &lt;label&gt;URL&lt;/label&gt;&lt;/label&gt;&lt;input type="text" name="url" id="url" tabindex="2" ng-model="newCompany.url" class="form-control"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-sm-6 col-sm-offset-3"&gt;
                          &lt;input type="submit" name="add-submit" id="add-submit" tabindex="10" class="form-control btn btn-primary" value="Add Company"&gt;
                          &lt;br&gt;
                          &lt;div class="text-center"&gt;
                              &lt;p ng-show="addCompany"&gt;&lt;span class="label label-info"&gt;{{ addCompany }}&lt;/span&gt;&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p>And the controller...</p>
  
  <pre><code>app.controller("CompaniesController", ['$scope', 'Companies', function($scope, Companies) {
      $scope.title = 'Companies';
      $scope.title_sub = 'Add Company';
  
     $scope.companyData = {
         id: $scope.newCompany.id,
         name: $scope.newCompany.name,
         primary_contact: $scope.newCompany.primary_contact,
         address: $scope.newCompany.address,
         function: $scope.newCompany.function,
         telephone: $scope.newCompany.phone,
         fax: $scope.newCompany.fax,
         url: $scope.newCompany.url
     };
  
      $scope.newCompany = function() {
          var company = new Companies($scope.companyData);
          company.$save();
      };
  
      $scope.companies = Companies.query();
  }]);
  </code></pre>
  
  <p>However - I get an error that says "cannot read property 'id' of undefined"</p>
  
  <p>Does anybody know what is wrong here? I thought $scope.[NG-MODEL] gets the form data...</p>