ng-bind-html not updated after ng-click fired

Question

Recently, I started to study on MEAN stack. I have created a ng-repeat in html, and for each title, I attacked a ng-click function, which is used to show the detail on a overlay popup.

 blogApp.controller("blogPanelController",['$scope','$resource',function($scope,$resource){ var blogs = $resource('/api/blog-list'); var blogDetail = $resource('/api/blogs/:timestamp', {timestamp: '@ts'}); blogs.query(function(results) { $scope.blogs = results; }) $scope.generateFloatLayer = function(timestamp){ blogDetail.get({ts: timestamp}, function(results){ $scope.detail = results; console.log($scope.detail.content); }); generateFloatLayer(timestamp); }; }]); 

 <!-- for overlay to display detail --> <div id="overlay" class="jin-overlay" onclick="removeFloatLayer()"></div> <div id="popup" class="jin-popup" ng-controller="blogPanelController" ng-cloak> <div ng-bind-html="detail.content | trusthtml"> <!-- Hello world blog --> {{detail.content}} </div> </div> <!-- list view --> <div class="container jin-page-buttom-margin" ng-controller="blogPanelController" ng-cloak> <div class="panel panel-info jin-shadow" ng-repeat="blog in blogs"> <div class="panel-heading"> <h3 class="panel-title" ng-click="generateFloatLayer(blog.timestamp)">{{blog.title}}</h3> </div> <div class="panel-body" ng-bind-html="blog.content | trusthtml"> <!-- html view content --> {{blog.content}} </div> </div> </div> 

Now comes to the problem, after I fired the ng-click, popup could displayed correctly, but no data binding displayed in it.

Do anyone have any idea?

Answer 1

Because your related piece of code is asynchronous this does not work. In that case I wrap my binding into a $timeout function:

blogDetail.get({ts: timestamp}, function(results){

    $timeout( function() {
        $scope.detail = results;
    } );
    console.log($scope.detail.content);
});

Do not forget to inject the $timeout into your dependencies!

blogApp.controller("blogPanelController",['$scope','$resource','$timeout',function($scope,$resource,$timeout){ ... }