$scope variable in angular controller not getting displayed in HTML

Question

I am trying to display the clicked_user to the chat window when clicked. But this value is never updated on the chat window even though I see it in console.

Controller code snippet -

 $(document).on('click', '.chatwin', function (e)
    {
    $scope.clicked_user = $(e.target).text();
     console.log("USER "+ $scope.clicked_user);
                $('#chat_window_1').show();
            });

HTML Code

 <div class="popup-head">
  <div class="popup-head-left pull-left"   ><img src="assets/images/AshaLogo.jpg" alt="User Image" >{{clicked_user}}</div>
<div class="popup-head-right pull-right"  style="text-align: right;"><div id="circle_green"></div></div>
</div>

Another observation is that if I initialise this value outside the function e.g as below it works . Can you let me know what am i doing wrong here.

Controller code

$scope.clicked_user =“DUMMY”

 $(document).on('click', '.chatwin', function (e) {
                //$(this).parent().parent().parent().parent().remove();
                $scope.clicked_user = $(e.target).text();
                console.log("USER "+ $scope.clicked_user);
                $('#chat_window_1').show();
            });

karaxuna · Accepted Answer · 2016-02-11 14:37:11Z

2

Try like this:

$scope.$apply(function () {
    $scope.clicked_user = $(e.target).text();
});

$scope.$apply calls digest and notify angular that something has changed.

answered Feb 11, 2016 at 14:37

karaxuna

26.9k13 gold badges86 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

paul trone Over a year ago

I'd even consider wrapping it in a $timeout callback function with no delay parameter, it will execute after the current digest is complete, avoiding calling apply while a digest is in progress.

dsaju · Accepted Answer · 2016-02-11 14:37:55Z

0

Adding $scope.$apply(); as shown below did the trick .

$scope.clicked_user=[];
                $(document).on('click', '.chatwin', function (e) {
                //$(this).parent().parent().parent().parent().remove();
                $scope.clicked_user= $(e.target).text();
                $scope.$apply();
                console.log("USER "+ $scope.clicked_user);
                $('#chat_window_1').show();
            });

answered Feb 11, 2016 at 14:37

dsaju

331 silver badge8 bronze badges

Collectives™ on Stack Overflow

$scope variable in angular controller not getting displayed in HTML

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related