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>