angular doesn't render $scope

Question

I try to display some variable of my controller, but the output is just {{UserCtrl.user}} instead of the content of UserCtrl.user.

I got the following file structure:

index.html
scripts/app.js

This is the code of index.html:

<!doctype html>
<html lang="en" ng-app="birdsnest">
<head>
    <meta charset="utf-8">

    <title>Birdsnest</title>

    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.css">
</head>
<body>
    <div ng-controller="UserController as UserCtrl">
        {{UserCtrl.user}}
    </div>

    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular/angular.js"></script>

    <script src="scripts/app.js"></script>
</body>
</html>

scripts/app.js:

(function() {
  var app = angular.module('birdsnest', []);

  app.controller('UserController', ['scope', function($scope) {
    $scope.user = 'Michael';
  }]);
})();

Yes, it's in the html tag: <html lang="en" ng-app="birdsnest"> — Michael Pittino
– Michael Pittino, Commented Nov 7, 2015 at 19:39
You need to put the JS includes on top of everything, not below. (in the <head> section) — user447356
– user447356, Commented Nov 7, 2015 at 19:47

Alon Eitan · Accepted Answer · 2015-11-07 19:57:31Z

2

Change this line:

app.controller('UserController', ['scope', function($scope) {

To:

 app.controller('UserController', ['$scope', function($scope) {

Edit: If you're using controllerAs then I think you should rewrite your code:

app.controller('UserController', function() {
  this.user = 'Michael';
});

edited Nov 7, 2015 at 19:57

answered Nov 7, 2015 at 19:42

Alon Eitan

12k8 gold badges51 silver badges61 bronze badges

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

3 Comments

Michael Pittino Over a year ago

When I do this I don't get any output.

Michael Pittino Over a year ago

Oh I just noticed that if I change it to this it works: <div ng-controller="UserController"> {{user}} </div> Can someone explain me why?

Alon Eitan Over a year ago

@MichaelPittino - I have updated my answer, please check if it helps

wmock · Accepted Answer · 2015-11-07 20:02:06Z

1

When you're using the ControllerAs syntax in your HTML, the values that end up getting bound to the controller instance is actually on your this object.

What this means is that your code that attaches user to the scope object is incorrect; instead you should do the following:

app.controller("UserController", function() {
  this.user = "Michael";
});

answered Nov 7, 2015 at 20:02

wmock

5,5025 gold badges44 silver badges62 bronze badges

Collectives™ on Stack Overflow

angular doesn't render $scope

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related