CODEWITHSUNDEEP
javascriptangularjs
Billa
Billa

Reputation: 5266

Controller with scope variable not working

From Documentation

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="[email protected]"></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';
});

Upvotes: 1

Views: 404

Answers (1)

Huy Hoang Pham
Huy Hoang Pham

Reputation: 4147

You forgot to set the ng-app

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

Upvotes: 3

Related Questions