AngularJS: AngularJS Forms submitting empty object

Question

Well, I watched several videos on AngularJS Forms and read the section in the NG-Book on forms but obviously I missed something.

I have a form that should be bound to current_user in the $scope and as you can see in updatePrefs, I am logging out current_user and it is an empty [object Array] after I submit the form.

$scope.updatePrefs = function($event){
     $event.preventDefault();
     console.log('Form Submitted');
     console.log(current_user);
     $scope.prefPane = false;
};


<form class="preference_form wModal" 
          id="frmPreference" 
          name="frmPreference" 
          role="form" data-ng-show="prefPane">
        <span class="close-modal" 
              ng-click="prefs = false" 
              ng-hide="isNewUser">
            <a ng-click="prefPane = false">close</a>
        </span>

        <h1>My Preferences</h1>

        <p style="margin:-10px 0 0 40px;"><span class="required">*</span> Indicates required field</p>

        <div class="frmElement">
            <label>Manager:<span class="required">*</span></label>
            <div id="peoplePickerDiv"></div>
        </div>

        <div class="frmElement">
            <label>Division / Profit Center: <span class="required">*</span></label>
            <select name="division" 
                    ng-options="d.Title as d.Title for d in divisions" 
                    ng-model="current_user.Division">
                <option value="">Select Division ...</option>
            </select>
        </div>

        <div class="frmElement" 
             data-ng-show="current_user.Division == 'Information Technology'">
            <label>Please choose your role in the system: <span class="required">*</span></label>
            <input type="radio" 
                   ng-model="current_user.User_Role" 
                   value="PMG">&nbsp;&nbsp;
            <span class="chkbx_choice">Project Manager</span>
            <br />
            <input type="radio" 
                   ng-model="current_user.User_Role" 
                   value="RQC">&nbsp;&nbsp;
            <span class="chkbx_choice">Request Coordinator</span>
            <br />
            <input type="radio" 
                   ng-model="current_user.User_Role" 
                   value="RSC">&nbsp;&nbsp;
            <span class="chkbx_choice">Resource</span>
        </div>

        <div class="frmElement" 
             data-ng-show="current_user.User_Role == 'PMG' || current_user.User_Role == 'RQC'" 
             data-ng-hide="current_user.User_Role == '' || current_user.User_Role == 'RSC' || !current_user.User_Role">
            <label>Request Types: <span class="required">*</span></label>
            <input type="checkbox" name="RTAccess" value="Email" ng-model="RTAccess">&nbsp;&nbsp;
            <span class="chkbx_choice">Email</span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="RTAccess" value="Radio" ng-model="RTAccess">&nbsp;&nbsp;
            <span class="chkbx_choice">Report</span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="RTAccess" value="SAP" ng-model="RTAccess">&nbsp;&nbsp;
            <span class="chkbx_choice">SAP</span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="RTAccess" value="Web" ng-model="RTAccess">&nbsp;&nbsp;
            <span class="chkbx_choice">Web</span>
        </div>

        <div class="frmElement" 
             data-ng-show="current_user.Division == 'Information Technology' && current_user.User_Role == 'RSC'" 
             data-ng-hide="current_user.User_Role == '' || current_user.User_Role == 'PMG' || current_user.User_Role == 'RQC' || !current_user.User_Role">
            <label>Function: <span class="required">*</span></label>
            <select name="resource_function" 
                    ng-options="f.Title as f.Title for f in rsc_funcs" 
                    ng-model="current_user.Resource_Function">
                <option>Select Function ...</option>
            </select>
        </div>

        <div class="frmElement">
            <label>Notification Preferences:</label>
            <input type="checkbox" name="task_created" 
                   data-ng-model="current_user.nTaskCreated">&nbsp;&nbsp;
            <span class="chkbx_choice">Notify Me When Someone in my Division Creates a Task</span>
            <br />
            <input type="checkbox" 
                   name="task_changed" 
                   data-ng-model="current_user.nTaskUpdated">&nbsp;&nbsp;
            <span class="chkbx_choice">Notify Me When my Task is Changed</span>
            <br />
            <input type="checkbox" 
                   name="task_closed" 
                   data-ng-model="current_user.nTaskClosed">&nbsp;&nbsp;
            <span class="chkbx_choice">Notify Me When my Task is Closed</span>
            <br />
        </div>

        <div class="frmElement">
            <label>The following notifications will be sent to all users:</label>
            <span class="chkbx_choice">When Communication Notes are Updated</span>
            <br />
            <span class="chkbx_choice">When UAT / Testing is Required</span>
            <br />
            <span class="chkbx_choice">When Sign Off is Required</span>
            <br />
        </div>

        <div class="frmElementSubmit">
            <input type="submit" class="btn btn-primary" value="SAVE" 
                   ng-click="updatePrefs($event)"  />
        </div>
    </form>

Answer 1

You are quite close - it is just a minor issue. In your updatePrefs function you are logging out a local variable current_user. You are interested in $scope.current_user:

$scope.updatePrefs = function($event){
     $event.preventDefault();
     console.log('Form Submitted');
     console.log($scope.current_user);
     $scope.prefPane = false;
};