Почему привязка не работает в угловых js?

Question

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

Когда ДИВ нажатии она вызывает функцию, которая делает запрос GET и

---

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; 

     }); 
    }; 

}; 

---

Несмотря на то, console.log работает он печатает имя пользователя в консоли, Он не обновляется в username.why имя пользователя не обновляется?

---

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

Answer 1

Убедитесь, что ДИВ помещается внутри нг-контроллер DIV

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

Answer 2

Fix опечатки вашего имени контроллера. 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; 

     }); 
    }; 

};