Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

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>
share|improve this question
    
whats the error ? – NLN Jun 19 '15 at 10:03
    
I cannot see any multiplication of 'Total' – toxic Jun 19 '15 at 10:04
    
line appears in html is as --> Total: {{invoice.qty * invoice.cost | currency}} – toxic Jun 19 '15 at 10:05
    
You have nested ng-app attributes, this can cause issues (stackoverflow.com/questions/22548610/…) – 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
up vote 2 down vote

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

share|improve this answer
    
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! – toxic 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 – toxic Jun 19 '15 at 10:17
    
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 – NLN Jun 19 '15 at 10:17
    
Updated the plunkr :) – NLN Jun 19 '15 at 10:22
    
many thanks it works ... I have also answer slighty different ... I have given you mark on your answer... – toxic Jun 19 '15 at 10:43
up vote 0 down vote

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;
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.