Ciwan Ciwan - 3 months ago 8
AngularJS Question

Can't Get "Hello World" to work with Angular JS

I am trying to follow along a PluralSight course on AngularJS Fundamentals. The guy's code and mine is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello World</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
</header>
<section>
</section>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

<script type="text/javascript">
function HelloWorldCtrl($scope) {
$scope.helloMessage = "Hello World";
}
</script>
</body>
</html>


Yet it works for him and does not for me! What am I doing wrong? Seems like a pretty simple setup to me, yet it isn't working for me. I am not getting Hello World, instead I get:


{{helloMessage}}


Any help would be greatly appreciated.

Answer

Add ng-app attribute inside your html tag. Like this: <html ng-app>.

Working example: http://plnkr.co/edit/dBJmLr?p=preview