<!DOCTYPE html>
<
html
ng-app
=
"myApp"
>
<
head
>
<
script
src
=
</
script
>
<
style
>
h1 {
color: green
}
button {
color: white;
background-color: black;
height: 30px;
width: 160px;
padding: 3px;
margin: 5px;
border-radius: 5px;
}
input {
width: 200px;
padding: 5px 15px;
margin: 5px 0;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
}
</
style
>
</
head
>
<
body
ng-controller
=
"myCtrl"
>
<
center
>
<
h1
> GeeksforGeeks</
h1
>
<
h3
>AngularJS $parse service</
h3
>
<
h4
>{{fullName}}</
h4
>
<
form
ng-submit
=
"updateFullName()"
>
<
label
>First Name:</
label
>
<
input
type
=
"text"
ng-model
=
"newFirstName"
required>
<
br
>
<
label
>Last Name:</
label
>
<
input
type
=
"text"
ng-model
=
"newLastName"
required>
<
br
>
<
button
type
=
"submit"
>
Update Full Name
</
button
>
</
form
>
</
center
>
<
script
>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $parse) {
$scope.firstName = 'Hello';
$scope.lastName = 'Geek';
// Parse the expression and assign the result to a variable
var getFullName = $parse('firstName + " " + lastName');
$scope.fullName = getFullName($scope);
// Update the values of firstName and
// lastName and re-evaluate the expression
$scope.updateFullName = function () {
$scope.firstName = $scope.newFirstName;
$scope.lastName = $scope.newLastName;
$scope.fullName = getFullName($scope);
}
});
</
script
>
</
body
>
</
html
>