Issue in accessing textbox value in angular js 1?

Question

I am calling function on ng-keyup and trying to pass a textbox value which is not actually got passed and got "undefined" variable

html code

<md-input-container class="md-icon-float md-block">
                <label >First Name </label>
                <md-icon md-font-icon="icon-account" class="name"></md-icon>
                <input type="fname" id="fname" name="fname" ng-value = "{{vm.form.fname}}" ng-model="vm.contact.fname" ng-pattern="/^[a-zA-Z ]{2,30}$/" type="text" ng-keyup = "vm.firstLetterCaps('fname',vm.form.fname)"  required> 
                <div ng-messages="contactForm.fname.$error" role="alert">
                        <div ng-message="required">
                            <span>First name is required</span>
                        </div>
                        <div ng-message="pattern">
                            <span>First name must be a valid </span>
                        </div>
         </div>
 </md-input-container>

controller code for function

function firstLetterCaps(textboxid, str){
            console.log(textboxid)
            console.log(str)
            // string with alteast one character
              if (str && str.length >= 1)
              {       
                  var firstChar = str.charAt(0);
                  var remainingStr = str.slice(1);
                  str = firstChar.toUpperCase() + remainingStr;
              }
              if()
              document.getElementById(textboxid).value = str;
          }

Answer 1

 <input type="fname" id="fname" name="fname" ng-value = "{{vm.form.fname}}" 
    ng-model="vm.contact.fname" ng-pattern="/^[a-zA-Z ]{2,30}$/" type="text" 
    ng-keyup = "vm.firstLetterCaps('fname',vm.form.fname)"  required> 

You can directly pass your ng-model itself, like below:

ng-keyup = "vm.firstLetterCaps('fname',vm.contact.fname)"