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, Jun 19 '15 at 10:05
You have nested `ng-app` attributes, this can cause issues (http://stackoverflow.com/questions/22548610/can-i-use-one-ng-app-inside-another-one-in-angularjs) — StuperUser, Jun 19 '15 at 10:05
Has invController.js been loaded properly and displaying 1 and 2 in your inputs? — StuperUser, Jun 19 '15 at 10:06

score 2 · Answer 1 · answered Jun 19 '15 at 10:14

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 '15 at 10:14

nalinc

7,375
24
33

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 Jun 19 '15 at 10:16
1

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 – K.Z Jun 19 '15 at 10:17
Yes. keep only one `ng-app`. Be it in `` tag above OR the `
` tag. Just be sure that it appears before/with `ng-controller`
– nalinc Jun 19 '15 at 10:17
Updated the plunkr :) – nalinc Jun 19 '15 at 10:22
many thanks it works ... I have also answer slighty different ... I have given you mark on your answer... – K.Z Jun 19 '15 at 10:43

score 0 · Answer 2 · answered Jun 19 '15 at 10:42

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 '15 at 10:42

K.Z

5,201
25
104
240

Pass model variable from controller to html using AngularJS

controller

Html

2 Answers2