I am using factory method in AngularJS to show the combination of First Name and Last Name (first two controllers) as Full Name(in third Controller), but i am not getting the desired output. here is my code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<input type="text" ng-model="Data.FirstName">
<br>FirstName is : <strong>{{Data.FirstName}}</strong>
</div>
<hr>
<div ng-controller="SecondCtrl">
<input type="text" ng-model="Data.LastName">
<br>LastName is : <strong>{{Data.LastName}}</strong>
</div>
<div ng-controller="ThirdCtrl">
FullName is : {{Data.FirstName + " " + Data.LastName}}
</div>
</div>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.factory('Data', function () {
return { FirstName: '',LastName:'' };
});
myApp.controller('FirstCtrl', function ($scope, Data) {
$scope.Data = Data;
});
myApp.controller('SecondCtrl', function ($scope, Data) {
$scope.Data = Data;
});
myApp.controller('ThirdCrl', function ($scope, Data) {
$scope.Data = Data;
});
</script>
</body>
</html>Can you please Help?
