AngularJS - Sharing State Between Controllers

HTML

<script src="http://code.angularjs.org/1.1.4/angular.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div ng-app="myapp">
    <fieldset ng-controller="FirstCtrl">
        <legend>FirstCtrl</legend>
        <input type="text" ng-model="person.first">
        <input type="text" ng-model="person.last">
    </fieldset>
    <fieldset ng-controller="SecondCtrl">
        <legend>SecondCtrl ({{ fullName() }})</legend>
        <input type="text" ng-model="person.first">
        <input type="text" ng-model="person.last">
    </fieldset>
</div>

JavaScript

var myapp = angular.module('myapp', []);



myapp.controller('FirstCtrl', function ($scope, personService) {
    $scope.person = personService.person;
});

myapp.controller('SecondCtrl', function ($scope, personService) {
    $scope.person = personService.person;
    $scope.fullName = personService.fullName;
});

myapp.factory('personService', function () {
    var p = { first: 'First', last: 'Last' };
    return {
        person: p,
       
    };
});