I am working on an update page and would like to load the function based on the item selected. I figured out that you can get the id using var itemId = parseInt(GetUrlKeyValue('ID')); But the bit i am missing is how to load the controls on the pages such as textbox etc on form load based on the id. Please see below what i have managed so far.

I am new to client side scripting so some explanation will be greatly appreciated.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>  
<script>
    window.onload = function () {
        //   alert('pease select IT');
 
    };

    //Update
    function ContactsUpdate($scope) {
        $scope.contact = { firstName: "", lastName: "", Location: "", Departmant: "" };
        $scope.UpdateContact = function ($event) {
            var x = $scope.contact;
            $event.preventDefault();

            //if (x.Departmant == "HR") {
            //    alert('pease select IT , This is update');
            //}
            //else {
                var clientContext = new SP.ClientContext.get_current();
                var web = clientContext.get_web();
                var list = web.get_lists().getByTitle('Contact Details');
                var itemId = parseInt(GetUrlKeyValue('ID'));
                //this.oListItem = list.getItemById(9);
                var listItem = list.getItemById(9);

                listItem.set_item('Title', 'My new updated Title');
               listItem.set_item('Title', x.firstName);
                listItem.set_item('firstName', x.firstName);
                listItem.set_item('lastName', x.lastName);
                listItem.set_item('fullName', x.firstName + " " + x.lastName);
                listItem.set_item('Location', x.Location);
                listItem.set_item('Departmant', x.Departmant);

               
                alert(listItem.get_item('Title'));

                listItem.update();

                clientContext.executeQueryAsync(
                   Function.createDelegate(this, onQuerySucceededUpdate),
                   Function.createDelegate(this, onQueryFailedUpdate)
                   );
        }
      
        //}
    };
  
    onQuerySucceededUpdate = function () {
        alert('Successfully updated the contact');
    }

    onQueryFailedUpdate = function (sender, args) {
        alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
    }

</script>  
  
  
<h1>Contact Information:</h1>  
<br />  
<div ng-app="">  

    <div ng-controller="ContactsUpdate">  
        <strong>First Name</strong>  
        <input type="text" ng-model="contact.firstName" id="firstName"/><br />  
        <br />  
        <strong>Last Name</strong>   
        <input type="text" ng-model="contact.lastName" id="firstName"/><br />  
        <br />  
        <strong>Location    &nbsp;  &nbsp;  </strong> <input type="text" ng-model="contact.Location" id ="location"/><br />  
        <br />  
        <strong>Departmant      
        
        <select id="Departmant" ng-model="contact.Departmant" >
            <option>HR</option>
            <option>IT</option>

        </select><input type="submit" value="Submit" ng-click="UpdateContact($event)" />  
    </div>  
</div>