Angular error: Error: Argument 'StoreController as store' is not a function, got undefined
index.html
<!DOCTYPE html>
<!-- runs the module when the document loads -->
<html ng-app='store'>
<head>
<link rel='stylesheet' type='text/css' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'/>
</head>
<body>
<!-- expressions -->
<!-- directive controller name alias -->
<div ng-controller='StoreController as store'>
<h1> {{store.product.name}} </h1>
<h2>${{store.product.price}}</h2>
<p>{{store.product.description}}</p>
</div>
<script type = 'text/javascript' src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js'></script>
<script type ='text/javascript' src='app.js'></script>
</body>
</html>
app.js
// wrap the function inside a closure.
(function(){
var app = angular.module('store', []);
app.controller('StoreController', function(){
// will be executed when the store controller is called.
this.product = gem;
});
var gem = {
name: 'Dodecahedron',
price: 2.95,
description: '. . .'
};
})();
I am brand new to angular and keep getting the error that I posted above in my chrome console whenever I load my app. I think everything is correct. I am not sure why the function StoreController is not defined, am I not passing the controller properly to my index.html?
