Pass model variable from controller to html using AngularJS

Question

Pass model variable from controller to html using AngularJS

2.4k Views Asked by K.Z At 04 April 2025 at 13:29

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>

Original Q&A

There are 2 best solutions below

**nalinc** · Answer 1

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

**K.Z** · Answer 2

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;
});

Pass model variable from controller to html using AngularJS

controller

Html

There are 2 best solutions below

Related Questions in ANGULARJS

Related Questions in ANGULARJS-CONTROLLER

Trending Questions

Popular # Hahtags

Popular Questions