title: I want not to escape HTML tags and to use object literal in Angular app
body: <p>I am newbie of AngularJS. I want NOT to escape HTML tags, and wrote the code below.</p>
  
  <p>At first, defining <code>deliberatelyTrustDangerousSnipet()</code> I succeeded to escape HTML tags (with good advisers in this site).</p>
  
  <p>Secondary, I want to use <code>&lt;div ng-bind-html="phone.snippet"&gt;&lt;/div&gt;</code>.</p>
  
  <pre><code>&lt;script&gt;
    angular.module('plunker', ['ngSanitize'])
    .controller('MainCtrl', ['$scope', '$sce', function($scope, $sce) { 
      $scope.phone = 
        {'name': 'Nexus S',
         'snippet': '&lt;iframe width="560" height="315" src="//www.youtube.com/embed/-RRqZ7FAlG0?rel=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;'};
      // This works well
      $scope.deliberatelyTrustDangerousSnippet = function() {
        return $sce.trustAsHtml('&lt;iframe width="560" height="315" src="//www.youtube.com/embed/-RRqZ7FAlG0?rel=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;');
      };
      // This doesn't work
      //$sce.trustAsHtml($scope.article.content);
    }])
  &lt;/script&gt;
  
  &lt;div ng-controller="MainCtrl"&gt;
    &lt;div ng-bind-html="deliberatelyTrustDangerousSnippet()"&gt;&lt;/div&gt;
  
    &lt;!-- ### Can we write like below? ### --&gt;
    &lt;div ng-bind-html="phone.snippet"&gt;&lt;/div&gt;
  
  &lt;/div&gt;    
  </code></pre>
  
  <p>The code is on <a href="http://plnkr.co/edit/ATO2EPhIfTeT67u8MAcr?p=preview" rel="nofollow">Plunker</a>, too.</p>