title: AngularJS Form and $scope not updating each other
body: <p>I am trying to make a very minimalistic form in AngularJS (version 1). </p>
  
  <p>I am trying to use ng-model and the <code>$scope</code> to update an object I've named <code>fluff</code>. Once a user clicks submit it should be used in this <code>$http</code> call.</p>
  
  <p>I'm highly confused I thought ng-model would bind this to the object in the scope. But it always returns a blank cause the <code>$scope.fluff</code> is not updating. </p>
  
  <p>Yet if I inject <code>{{ fluff.link }}</code> this will update based on the textbox. </p>
  
  <p>Here is my form in the view: </p>
  
  <pre><code>    &lt;form name="fluffForm" ng-submit="submitform()"&gt;
        &lt;span&gt;Link: &lt;input type="text" name="link" ng-model="form.link"&gt;&lt;/span&gt;
      &lt;span&gt;Description: &lt;input type="text" name="description" ng-model="form.desc"&gt;&lt;/span&gt;
        &lt;button type="submit"&gt;submit&lt;/button&gt;
  
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my controller: </p>
  
  <pre><code>(function(){
  
      'use strict';
  
      angular.module('fluff').controller('FormController', FormController);
  
  
      FormController.$inject = ['$scope', '$rootScope', '$routeParams', '$window', '$http'];
  
  
      function FormController( $scope, $rootScope, $routeParams, $window, $http){
  
          var form = this;
          $scope.fluff = {}; // form data in json object(?) to be posted to mongo database
          $scope.submitform = function(){
              $scope.fluff.link = form.link; 
              $scope.fluff.description = form.desc; 
              console.log('form-data', $scope.fluff);
              $http({
                  method: 'POST',
                  url: 'http://fluff.link/share',
                  data: $scope.fluff,
                  headers: {'Content-type': 'application/x-www-form-urlenconded'}
              }).success(function(data){
                  console.log('Call to API was successful');
                  if(data.errors){
                      console.log('Data Errors');
                      console.log('error:', $data.errors.name);
                      //show errors  -  part of the response in the REST API have to make this portion up myself
                      $scope.errorName = $data.errors.name;
  
                  } else {
                      console.log('returned share id', data);
                      var fluff = 'fluff/link/'+ data;
                      $window.location.href = fluff;
                  }
  
              });
  
          }
  
  
      }
  
  })();
  </code></pre>
  
  <p>Here is my route: </p>
  
  <pre><code>(function(){
  
      'use strict';
  
      angular.module('fluff').config(Config);
  
      Config.$inject = ['$routeProvider'];
  
      function Config($routeProvider){
  
          $routeProvider.when('/', {
              templateUrl: 'views/index.client.view.html',
              controller: 'FormController',
              controllerAs: 'form'
          });
  
      }
  
  })();
  </code></pre>
  
  <p>Added some logs from the developer console in chrome: </p>
  
  <pre><code>in submitform FormController {link: "test", desc: "test"}
  fluff.form.controller.js:24 form-data Object {link: undefined}
  </code></pre>
  
  <p>Got it to work! Will update with my answer when it allows! </p>