CODEWITHSUNDEEP
javascriptangularjsbindingangularjs-scope
kevin
kevin

Reputation: 87

why binding not working in angular js?

  <div class="popover-content" ng-click="updateHeader('jack')">

When this div is clicked it calls a function which makes a get request and

var app = angular.module('myApp', []);
app.controller('myContoller', function($scope, $http) {

$scope.username = "";
$scope.updateHeader = function(username) {

 var url = "api?user="+ username;
 $http.get(url)

 .then(function(response) {
   $scope.username = response.data.plugUser;
   console.log($scope.username);
   $scope.scrollableChatItems = response.data.msg;

       });
   };

};

Even though the console.log is working it is printing the username in the console, It is not updating in the username.why the username is not updating?

<div class="container" ng-controller="myController">
                    <h3 class="content-box-header">
                        {{username}}
                    </h3>

Upvotes: 1

Views: 2470

Answers (2)

clcastro87
clcastro87

Reputation: 41

Fix typo your controller name. myContoller

var app = angular.module('myApp', []);
app.controller('myController', function($scope, $http) {

$scope.username = "";
$scope.updateHeader = function(username) {

 var url = "api?user="+ username;
 $http.get(url)

 .then(function(response) {
   $scope.username = response.data.plugUser;
   console.log($scope.username);
   $scope.scrollableChatItems = response.data.msg;

       });
   };

};

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222522

Make sure your div is placed inside the ng-controller div

   <div class="container" ng-controller="myController">
      <div class="popover-content" ng-click="updateHeader('jack')">
         <h3 class="content-box-header">
           {{username}}
        </h3>
       </div>
    </div>

Upvotes: 2

Related Questions