<!DOCTYPE html>
<html ng-app="myApp">

    <link rel="stylesheet" href="style.css" />

    <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 ng-controller="Ctrl2">
        <h2>Controller 2 Says:</h2>
        <p>You're having: <input ng-model="yourBreakfast.food" type="text" /></p>
    <div ng-controller="Ctrl3">
        <h2>Controller 3 Says:</h2>
        <p>Here's what we're having: <b>{{ourBreakfast.food}}</b></p>
    <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.
    <script src="http://code.angularjs.org/1.2.1/angular.js"></script>
    <script src="script.js"></script>

// 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 */