Pass model variable from controller to html using AngularJS

Question

I am very new to AngularJs. In my example I am trying to read two initiger value from controller model and multiple that numbers in html page by using AngularJs tag.

controller

(function (angular) {
angular.module('Invoice1', [])
.controller('InvoiceController', function () {
    this.qty = 1;
    this.cost = 2;
  });
})

Html

<!DOCTYPE html>
<html ng-app>
<head>
 <title>AngularJs Form Test 2</title>
 <link href="Content/bootstrap.min.css" rel="stylesheet" />
 <script src="Scripts/angular.min.js"></script>

<script src="invController.js"></script>
</head>
 <body>
  <div id="calculateNumber" ng-app="Invoice1" ng-controller="InvoiceController as invoice">
    <div>
        Quantity : <input type="number" min="0" ng-model="invoice.qty" />
    </div>
    <div>
        Costs : <input type="number" min="0" ng-model="invoice.cost" />
    </div>
    <div>
        <b>Total: </b> {{invoice.qty * invoice.cost | currency}}
    </div>
  </div>
 </body>
</html>

line appears in html is as --> Total: {{invoice.qty * invoice.cost | currency}} — K.Z
– K.Z, Commented Jun 19, 2015 at 10:05
You have nested ng-app attributes, this can cause issues (stackoverflow.com/questions/22548610/…) — StuperUser
– StuperUser, Commented Jun 19, 2015 at 10:05
Has invController.js been loaded properly and displaying 1 and 2 in your inputs? — StuperUser
– StuperUser, Commented Jun 19, 2015 at 10:06

nalinc · Accepted Answer · 2015-06-19 10:14:09Z

2

You have mentioned multiple ng-app in your html.

Use ng-app="Invoice1" in <html> tag, remove the other one and you are good to go

<!DOCTYPE html>
<html ng-app="Invoice1">
<head>
 <title>AngularJs Form Test 2</title>
 <link href="Content/bootstrap.min.css" rel="stylesheet" />
 <script src="Scripts/angular.min.js"></script>

<script src="invController.js"></script>
</head>
 <body>
  <div id="calculateNumber" ng-controller="InvoiceController as invoice">
    <div>
        Quantity : <input type="number" min="0" ng-model="invoice.qty" />
    </div>
    <div>
        Costs : <input type="number" min="0" ng-model="invoice.cost" />
    </div>
    <div>
        <b>Total: </b> {{invoice.qty * invoice.cost | currency}}
    </div>
  </div>
 </body>
</html>

Here's the updated plunkr

answered Jun 19, 2015 at 10:14

nalinc

7,43327 silver badges34 bronze badges

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

4 Comments

K.Z Over a year ago

I believe you dont have to mension two time ng-app for same module even if you remove ng-app tag from html tag in plunker ... is still works!

K.Z Over a year ago

I believe is references issue because I just did another example with javascript and html in same page. i.e. embedded angularjs controller in html and it works

nalinc Over a year ago

Yes. keep only one ng-app. Be it in <html> tag above OR the <div> tag. Just be sure that it appears before/with ng-controller

K.Z Over a year ago

many thanks it works ... I have also answer slighty different ... I have given you mark on your answer...

K.Z · Accepted Answer · 2015-06-19 10:42:24Z

0

I have managed to run it by changing controller javaScript code as

var myApp2 = angular.module('Invoice1', []);

myApp2.controller('InvoiceController', function ($scope) {
   $scope.qty = 1;
   $scope.cost = 2;
});

answered Jun 19, 2015 at 10:42

K.Z

5,09527 gold badges121 silver badges268 bronze badges

Collectives™ on Stack Overflow

Pass model variable from controller to html using AngularJS

controller

Html

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

controller

Html

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related