load controls with list item on page load angular js

Question

I am working on an update page and would like to load the current item 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 with current item based on the id. the below code is not working on pageload

  window.onload = function () {
          alert('onload');
        var clientContext = new SP.ClientContext.get_current();
        var oList = clientContext.get_web().get_lists().getByTitle('Contact Details');

        this.oListItem = oList.getItemById(9);
        alert(listItem.get_item('Title'));


       // 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);
       // alert(listItem.get_item('Title'));
       // //document.getElementById("Title").value = "value";
       // document.getElementById("firstName").value = listItem.get_item('firstName');
       // document.getElementById("lastName").value = listItem.get_item('lastName');
       //// document.getElementById("fullName").value = "value";
       // document.getElementById("location").value = listItem.get_item('Location');
       // document.getElementById("Departmant").value = listItem.get_item('Departmant');

    };

I am new to client side scripting so some explanation will be greatly appreciated. Please see the whole code.

<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>  

Answer 1

Assuming the code to be run in SharePoint context. Sample code to get list item by Id and populate in controls (textbox etc). Execute it in window load event.

Replace the list_name and list item id in the code below.

var ctx = SP.ClientContext.get_current();
var list = ctx.get_web().get_lists().getByTitle("list_name");
var listItem = list.getItemById(1);

ctx.load(list);
ctx.load(listItem);

ctx.executeQueryAsync(onSuccess, onFail);

function onSuccess(){
    document.getElementById('control_1').value = listItem.get_item("Name");
    //populate other controls here
}

function onFail(s,a){
    console.log("fail " + a.get_message());
}