Controller with scope variable not working

Question

The syntax InvoiceController as invoice tells Angular to instantiate the controller and save it in the variable invoice in the current scope.

We also changed all expressions in the page to read and write variables within that controller instance by prefixing them with invoice.

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js" data-require="angular.js@1.3.x"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="InvoiceController as invoice">
    <p>Hello {{invoice.name}}!</p>
  </body>

</html>

JS

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

app.controller('InvoiceController', function() {
  this.name = 'World';
});

But it is not working as mentioned in the document. I just moved the inline scripts to external file.

PLUNKER DEMO

Also why it is not working if i pass $scope to the controller function

app.controller('InvoiceController', function($scope) {
  $scope.name = 'World';
});

http://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers?rq=1 — Billa, Mar 19 '15 at 12:03

score 3 · Answer 1 · answered Mar 19 '15 at 08:53

3

You forgot to set the ng-app

<html ng-app="plunker">
<!-- REST OF HTML -->
</html>

answered Mar 19 '15 at 08:53

Huy Hoang Pham

4,107
1
16
28

Any idea, why it is not working if I pass `$scope` to the controller? – Billa Mar 19 '15 at 09:03
You have to change the html to {{name}}. It will read from scope, not the controller. – Huy Hoang Pham Mar 19 '15 at 09:08
Then what is the use of `ng-controller="InvoiceController as invoice"`? – Billa Mar 19 '15 at 11:55
This article will answer your question: http://toddmotto.com/digging-into-angulars-controller-as-syntax/ – Huy Hoang Pham Mar 20 '15 at 01:24

Controller with scope variable not working

1 Answers1