DevT DevT - 1 month ago 5
AngularJS Question

AngularJS - Controller values not binding

In my MVC program simple angular value controllers values are not binding.
My code is as follows :


<body data-ng-app="ShoppingCartApp">
<div class="container body-content">
@RenderSection("scripts", required: false)
<hr />


var app = angular.module('ShoppingCartApp', []);


app.controller('ShoppingCartController', function ShoppingCartController($scope, $http) {
$scope.ShoppingCartObj.products = [];
$scope.test = "ABC";

// On load events
// $scope.loadValues();

My Html Code is follows :

ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";

Total {{2+2}} // This value workd FINE
<div ng-controller="ShoppingCartController">
<div class="row">
<div class="nav navbar-nav navbar-left">
<h3>Total {{2+2}}</h3> // Not working THIS
<h1>{{test}}</h1> // Not working THIS


enter image description here

When i try to access value in controller or access directive inside controller it's not working. What i miss in here?


Change your controller to:

app.controller('ShoppingCartController', function($scope, $http) {....});

Or create a function named ShoppingCartController and then pass it to controller:

app.controller('ShoppingCartController', ShoppingCartController);