AngularJS - Controller value not dispaying

Question

I'm using AngularJS 1.5.0

Here's my HTML:

<!DOCTYPE html>
<html ng-app="app">
  <head>
  </head>

  <body ng-controller="TestController as controller">

    {{controller.test}}

    <script src="libraries/angular/angular.min.js"></script>
    <script src="js/app.js"></script>
  </body>

</html>

Here's my app.js:

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

app.controller("TestController", function() {
  var test = "Hello World";

//  window.alert(test); THIS ALERT IS WORKING
});

In my index, it doesn't display anything. However, alerting the test variable does work.

Raulucco · Accepted Answer · 2016-02-26 07:21:58Z

3

The test variable is private to your controller. Assign it to the controller instance:

this.test = 'Whatever';

answered Feb 26, 2016 at 7:21

Raulucco

3,4261 gold badge23 silver badges27 bronze badges

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

1 Comment

Michael 'Maik' Ardan Over a year ago

Works perfectly fine with the detailed reason. Thank you!

murli2308 · Accepted Answer · 2016-02-26 07:21:12Z

2

Assign value to $scope

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

app.controller("TestController", function($scope) {
   $scope.test = "Hello World";

 //  window.alert(test); THIS ALERT IS WORKING
});

or you can also use the other way

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

app.controller("TestController", function($scope) {
   this.test = "Hello World";

 //  window.alert(test); THIS ALERT IS WORKING
});

answered Feb 26, 2016 at 7:21

murli2308

3,0224 gold badges32 silver badges47 bronze badges

Comments

gaurav bhavsar · Accepted Answer · 2016-02-26 07:45:41Z

2

You have to use $scope to bind value in html code.

app.controller("TestController", function($scope) {
  $scope.test = "Hello World";
});

or you can use this to create current controller's instance

app.controller("TestController", function($scope) {
  this.test = "Hello World";
});

edited Feb 26, 2016 at 7:45

answered Feb 26, 2016 at 7:21

gaurav bhavsar

2,0512 gold badges26 silver badges36 bronze badges

2 Comments

Raulucco Over a year ago

In his example he want's to avoid use of $scope, that's why uses controller as syntax.

gaurav bhavsar Over a year ago

ahh! yes I didn't notice that, any way thanks @Raulucco :)

Andrew · Accepted Answer · 2016-02-26 07:28:49Z

1

IF you want to display a value from controller itself you should assign it to controller using this keyword: this.test = "your value here". If you want to use controllers' scope so do $scope.test = "value here" and in view use it with {{test}}.

When you declaring your variable with var keyword it will be private, but to use it it view you need it to be a public

answered Feb 26, 2016 at 7:28

Andrew

1,5344 gold badges20 silver badges29 bronze badges

Collectives™ on Stack Overflow

AngularJS - Controller value not dispaying

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related