How to merge two columns in one cell-UI grid angularjs

See more:

Javascript

AngularJs

I merged two fields in one cell. what I want it let the user edit two fields. you can see photo Here. here is my JavaScript code

What I have tried:

<script type="text/javascript">
    var app = angular.module("uigridApp", ["ui.grid", "ui.grid.pagination","ui.grid.edit"]);
    app.controller("uigridCtrl", function ($scope) {
    $scope.gridOptionsYH = {
    paginationPageSizes: [10,20, 30],
    paginationPageSize: 10,
    columnDefs: [
    { field: 'ID'},
    { field: 'name' },
    { field: 'age' },
    { field: 'location'},
     { name:'Updated Location', field: 'Client', cellTemplate:'<div>{{row.entity.age + " " + row.entity.location }}</div>',enableCellEdit: true}
    ]
    };
    $scope.users = [
    { ID:"1",name: "A", age: 10, location: 'Nagpur' },
    { ID:"2",name: "B", age: 30, location: 'Chennai' },
    { ID:"3",name: "C", age: 29, location: 'Chennai' },
    {ID:"4", name: "D", age: 25, location: 'Bangalore' },
    { ID:"5",name: "E", age: 27, location: 'Vizag' },
    {ID:"6", name: "E", age: 38, location: 'Nagpur' },
    { ID:"7",name: "G", age: 25, location: 'Kakinada' },
    { ID:"8",name: "H", age: 7, location: 'Nagpur' },
    { ID:"9",name: "I", age: 22, location: 'Vijayawada' },
    { ID:"10",name: "J", age: 23, location: 'California' },
    {ID:"11", name: "K", age: 34, location: 'Atlanta' },
    { ID:"12",name: "L", age: 29, location: 'Repalle' },
    { ID:"13",name: "M", age: 19, location: 'Guntur' },
    {ID:"14", name: "N", age: 27, location: 'Vizag' }
    ];
    $scope.gridOptionsYH.data = $scope.users;
    });
</script>