kevin kevin - 1 month ago 8
AngularJS Question

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>

Answer

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>