I attempted to run a basic Angular example utilizing a controller, but it does not appear to be functioning correctly.
Below is the HTML code:
<!DOCTYPE html>
<html ng-app = "app">
<head>
<title></title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/my.js"/>
</head>
<body>
<label for = "fname">Name:</label><input type="text" id="fname" ng-model="name"/>{{name}}
<div class="container" ng-controller="SimpleController">
<ul>
<li ng-repeat="hero in heroes">{{hero.name}} - {{hero.city}}</li>
</ul>
</div>
</body>
</html>
The content of my.js is as follows:
angular.module("app",[]).controller('SimpleController',[function ($scope){
$scope.heroes =
[
{name:"Bruce Wayne", city:"Gotham"},
{name:"Kal-El", city:"Metropolis"},
{name:"Barry Allen", city:"Central City"},
{name:"Kara Jor-El", city:"National City"},
{name:"Shazam", cuty:"Fawcett City"}
];
}]);
While the ng-model directive works on my local system, the controller does not. I am currently using AngularJS 1.4.x (stable).
I have tried following other suggestions from previous questions, but still no luck. Can someone point out what I might be doing incorrectly?
I also created a JSFiddle demo. However, even within the JSFiddle environment, the ng-model does not seem to be functional.