<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> </head> <body> <div ng-app="myApp"> <h2>Controller 1</h2><br /> <div ng-controller="FirstCtrl"> <input type="text" ng-model="Data.FirstName"> <br>FirstName is : <strong>{{Data.FirstName}}</strong> </div> <hr> <h2>Controller 2</h2><br /> <div ng-controller="SecondCtrl"> <input type="text" ng-model="Data.LastName"> <br>LastName is : <strong>{{Data.LastName}}</strong> </div> <h2>Controller 3</h2><br /> <div ng-controller="ThirdCtrl"> <button ng-click="getName(Data)">Get full Name</button> FullName is : {{getName(Data)}} </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('ThirdCtrl', function ($scope, Data) { $scope.Data = Data; $scope.getName = Data; }); </script> </body> </html>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)