<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Let's have the same breakfast</h1>
<p>An example showing how to share data between controllers using a service</p>
<div ng-controller="Ctrl1">
<h2>Controller 1 Says:</h2>
<p>I'm having: <input ng-model="myBreakfast.food" type="text" /></p>
</div>
<div ng-controller="Ctrl2">
<h2>Controller 2 Says:</h2>
<p>You're having: <input ng-model="yourBreakfast.food" type="text" /></p>
</div>
<div ng-controller="Ctrl3">
<h2>Controller 3 Says:</h2>
<p>Here's what we're having: <b>{{ourBreakfast.food}}</b></p>
</div>
<p><b>Important:</b> notice the model used in the inputs is an object property, not
a primitive (like a string, number, boolean, etc.). In Angular, we're using
prototypical inheritance so only objects will be referenced across scopes.
</p>
<script src="http://code.angularjs.org/1.2.1/angular.js"></script>
<script src="script.js"></script>
</body>
</html>
// Declare the main module
var myApp = angular.module('myApp', []);
myApp.service('sharedModels', [function () {
'use strict';
// Shared Models
this.breakfast = {food: 'eggs'};
}]);
myApp.controller('Ctrl1', ['$scope', 'sharedModels', function($scope, sharedModels) {
$scope.myBreakfast = sharedModels.breakfast;
}]);
myApp.controller('Ctrl2', ['$scope', 'sharedModels', function($scope, sharedModels) {
$scope.yourBreakfast = sharedModels.breakfast;
}]);
myApp.controller('Ctrl3', ['$scope', 'sharedModels', function($scope, sharedModels) {
$scope.ourBreakfast = sharedModels.breakfast;
}]);
/* Styles go here */