Angular - Sharing Data Between Controllers

by Amanda Williamson

HTML

<div ng-app="myApp">
    <div ng-controller="FirstCtrl">
        <input type="text" ng-model="data.message" />
        <h1>{{data.message}}</h1>
    </div>
    <div ng-controller="SecondCtrl">
        <input type="text" ng-model="data.message" />
        <h1>{{data.message}}</h1>
    </div>
</div>

JavaScript

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

myApp.factory('Data', function() {
    return { message: "im data from a service" } 
});

function FirstCtrl($scope, Data) {    
    $scope.data = Data;
}

function SecondCtrl($scope, Data) {  
    $scope.data = Data;    
}