title: Angular bind object element to HTML
body: <p>I got the code from another question and it's straightforward and working fine</p>
  
  <pre><code>&lt;div ng-controller="ExampleController"&gt;
  &lt;p ng-bind-html="testHTML"&gt;&lt;/p&gt;
  (function(angular) {
    'use strict';
    angular.module('bindHtmlExample', ['ngSanitize'])
    .controller('ExampleController', ['$scope', function($scope) {
         $scope.testHTML = 'I am an &lt;code&gt;HTML&lt;/code&gt;string with ' +
                           '&lt;a href="#"&gt;links!&lt;/a&gt; and other &lt;em&gt;stuff&lt;/em&gt;';
    }]);
  })(window.angular);
  </code></pre>
  
  <p>Suppose, I'm getting an object and I want to show an element of the object</p>
  
  <pre><code>var obj = {
     title: 'Title',
     description: 'I am an &lt;code&gt;HTML&lt;/code&gt;string with ' +
         '&lt;a href="#"&gt;links!&lt;/a&gt; and other &lt;em&gt;stuff&lt;/em&gt;'
  };
  $scope.testHTML = obj;
  </code></pre>
  
  <p>Then how should I bind only the description on the html end?
  I've tried 
  <code>&lt;p ng-bind-html="{{testHTML.description}}"&gt;&lt;/p&gt;</code>and 
  <code>&lt;p ng-bind-html="testHTML.description"&gt;&lt;/p&gt;</code></p>
  
  <p><a href="https://plnkr.co/edit/i1oqPEbwa0qM38NYpCom?p=preview" rel="nofollow">plnkr example</a></p>