Restoring default drop down value with angularjs

Question

Although I have got this working, the way it works seems improper. I have a drop down list (DDL) that displays a list of teams. The top and default entry is "Select Team... ". Although my DDL is tied to a model, "Select Team..." shouldn't be part of it since "Select Team..." has no meaning to the domain model.

When a user clicks "Add New" the form clears and all DDLs should revert to their default values.

Here are the related controller functions:

scope.addUser = function() {
  resetToNewUser();
  $scope.profileVisible = true;
  $scope.oneAtATime = true;
  $scope.accordionStatus = { isFirstOpen: true, isFirstDisabled: false };
}

function resetToNewUser() {
  $scope.selectedUser.NtId = "";
  $scope.selectedUser.UserId = -1;
  $scope.selectedUser.IsActive = true;
  $scope.selectedUser.FirstName = "";
  $scope.selectedUser.LastName = "";
  $scope.selectedUser.JobTitle = "";
  $scope.selectedUser.Email = "";
  $scope.selectedUser.SecondaryEmail = "";
  $scope.selectedUser.PhoneNumber = "";
  for(var i = 0; i < $scope.roleList.length; i++) {
    if($scope.roleList[i].RoleSystemName.trim() === "BLU") {
      $scope.selectedUser.Role = $scope.roleList[i];
    }
  }
  $scope.selectedUser.SupervisorId = null;
  //HACK BELOW//
  document.getElementById('selTeam').selectedIndex = 0; // <-- This works, but feels like a hack.
  $scope.selectedUser.IsRep = false;
  for(var i = 0; i < $scope.signingAuthorityList.length; i++) {
    if($scope.signingAuthorityList[i].SigningAuthoritySystemName === "SME") {
      $scope.selectedUser.SigningAuthority = $scope.signingAuthorityList[i];
    }
  }
  $scope.selectedUser.IsOutOfOfficeEnabled = false;
  $scope.selectedUser.OutOfOfficeStartDate = null;
  $scope.selectedUser.OutOfOfficeEndDate = null;
  $scope.selectedUser.OutOfOfficeAppointedRepId = null;
}

Here's how the DDL is defined in the template:

<div class="form-group">
  <label for="" class="control-label col-sm-2 required">Team</label>
  <div class="col-sm-10">
    <select class="form-control" id="selTeam"
            ng-model="selectedUser.Team"
            ng-options="team as team.TeamName for team in teamList track by team.TeamId">
      <option value="">Select Team...</option>
    </select>
  </div>
</div>

Is there a better way to do this?

Answer 1

You could always just remove the ability for the user to select your placeholder option, right? Something like this:

<option value="" disabled selected hidden>Select Team...</option>

Answer 2

You html part looks good, but I think on js side you make a lot of logic. What happens if there will be added new options on the server? Better get state of the new user from the backend, customize it with the select and other widgets and keep it before it will be submitted. On pseudo code it will be looks like

$scope.addUser = function() {
   //create empty user on the scope
   $scope.selectedUser = {};
   //get the new user state from the backend
   UserService.resetToNewUser($scope.selectedUser);
   //setup view options
   $scope.accordionStatus = {isFirstOpen: true, isFirstDisabled: false}
};

app.service('UserService', function(){
    this.resetToNewUser = function(user){
        $http({
            method: 'GET',
            url: '/default_user/'
        }).then(function successCallback(response) {
            user = response;
        );
    };           
});