AngularJS - Application With 2 Controllers

by derkoe

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 ({{ person.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) {
    $scope.person = {
        first: 'First',
        last: 'Last'
    };
});

myapp.controller('SecondCtrl', function ($scope) {
    $scope.person = {
        first: 'Second',
        last: 'Last',
        fullName: function () {
            return this.first + ' ' + this.last;
        }
    };
});