I have the following html:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS</title>
<script type="text/javascript" src="/javascripts/app.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstController">
<input type="text" ng-model="data.message">
<h1>{{data.message}}</h1>
</div>
<div ng-controller="SecondController">
<input type="text" ng-model="data.message">
<h1>{{data.message}}</h1>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
</body>
</html>
and the following coffeescript:
window.myApp = angular.module 'myApp', []
myApp.factory 'Data', ->
return message : 'I am data from a factory'
myApp.controller 'FirstController', ($scope, Data) ->
$scope.data = Data
myApp.controller 'SecondController', ($scope, Data) ->
$scope.data = Data
When I run the app, it prints out {{data.message}} instead of the text I type in the input box. When I remove the module dependency from the html and get data from a parent within the div, it works fine. This leads me to believe that the module is not getting created. What is the problem with my code?
