Angularjs: ng-bind-html & ng-repeat

Question

I have a views that i am updating after I retrieve them from the database for this template:

<div class="row" ng-repeat="post in posts">
        <div class="col-lg-9 col-lg-offset-2">        
          <!-- blog entry -->
          <br ng-hide="$last">
          <h1><a href="{{'#/post/' + post.title}}">{{post.title}} </a></h1>
          <p><span class="glyphicon glyphicon-time"></span> Posted on {{ post.time_Date | date:'MM/dd/yyyy @ h:mma'}} </p>
          <div class="image_Center">
            <!-- <img ng-src="{{post.imageUrl}}" width="550" height="450"> -->
            <img ng-src="{{post.imageUrl}}" width="450" height="350">
          </div>
          <br>
          <br>
          <div ng-bind-html="TrustDangerousSnippet()">
            <p>{{post.post}}</p>
          </div>
............not properly closed(huge template)

I am trying to update {{post.post}} with markdown text that I store and have it display properly using my controller. The code is as follows:

$scope.posts = input_data;
$scope.TrustDangerousSnippet = function() {
  return $sce.trustAsHtml(input_data.post);
};      

input_data is the collection of JSON objects(blog posts) from my server. The problem is that this entire object is not displayed, but if were to display one of the objects, it renders to the page. What could be the problem?

$scope.posts = input_data;
$scope.TrustDangerousSnippet = function() {
  return $sce.trustAsHtml(input_data[1].post);
};      

Does this have something to do with not using ng-repeat in a proper way?

Answer 1

Your trying to parse input_data.post in the TrustDangerousSnippet function, but that doesnt exist.

Instead, pass the object into the method like this:

<div ng-bind-html="TrustDangerousSnippet(post.post)">
</div>

Change the method to:

$scope.TrustDangerousSnippet = function(snippet) {
  return $sce.trustAsHtml(snippet);
};  

fiddle example: http://jsfiddle.net/ZxPHW/

Edit: in addition, you don't need to add {{post.post}} to the html.