why binding not working in angular js?

Question

  <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 1

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>