Why is this simple Angular code not working?

Question

Just playing around with Angular and I can't get it to work. The binding works when I set my ng-app="" and nothing else. This is my html file:

<!DOCTYPE html>
<html>
    <head>
    <script  src="app/app.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    </head>
<body ng-app="myApp" ng-controller="myController">
<ul ng-repeat="x in names">
    <li >
        {{ x }}
    </li>
</ul>
</body>

And my app.js

var myApp = angular.module("myApp", []);

myApp.controller("myController", function($scope){
  $scope.names = ['a', 'b'];
});

Yes the js files are in the right place and refrenced properly. I'm using WebStorm. I keep seeing the {{x}} on my page. Instead of the names inside the scope.

You are loading angular.js later. Try to load first before app.js. — Vineet
– Vineet, Commented Aug 21, 2015 at 5:28

Yasser Shaikh · Accepted Answer · 2015-08-21 05:46:54Z

10

Your app.js should be linked after angular:

<!DOCTYPE html>
<html>

<head>
    <script src="bower_components/angular/angular.js"></script>
    <script src="app/app.js"></script>
</head>

<body ng-app="myApp" ng-controller="myController">
    <ul ng-repeat="x in names">
        <li>
            {{ x }}
        </li>
    </ul>
</body>

</html>

edited Aug 21, 2015 at 5:46

Yasser Shaikh

47.9k50 gold badges208 silver badges289 bronze badges

answered Aug 21, 2015 at 5:27

GPicazo

6,7263 gold badges23 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why is this simple Angular code not working?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related