I am just now learning Angular.js and i am trying to share data between controllers. Here is where i call myApp from a seperate JS file:
<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>
Now i have a JS file called main which contains this code:
var myApp = angular.module('myApp', []);
myApp.factory('Data',function(){
return {message:'I am data from a service'}
})
function FirstCtrl($scope, Data){
$scope.data = Data;
}
function SecondCtrl($scope, Data){
$scope.data = Data;
}
What I want to happen is the and tags should share whatever is typed into the text boxes. When i load the page i get an error in saying
'Uncaught ReferenceError: angular is not defined main.js:1'
'Uncaught object'
No matter how a try and change the code it will not work. Any ideas?
