AngularJSのbindとは以下のようにhtmlのエレメントの値を書き込むことをさします。
<p>{{myData.text}}</p>同様の表現で以下の書き方も可能です。
<p ng-bind="myData.text"></p>例えばデータを以下のようにセットします。
$scope.myData = {
text:"こんにちは",
html:'<span style="color:red;">こんにちは</span>'
}そして
<p>{{myData.text}}</p>
<p>{{myData.html}}</p>と設定すると、それぞれこうなります。
こんにちは
<span style="color:red;">こんにちは</span>初期のAngularJSでは ng-bind-html-unsafeというディレクティブが用意されており、HTMLをそのまま表示することができましたが、1.5.Xのバージョンでは、ng-bind-html が用意され、HTMLの除去（サニタイズ）を行う仕様となったようです。unsafeとつけるくらいなので、そもそも非推奨だったのでしょうか。ともかくHTMLはbindしない表現が望ましいようです。
<p ng-bind-html="myData.html"></p>↓
こんにちはすべての例は以下に実装しました。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>// myAppモジュールを作成
var app = angular.module('myApp', ['ngSanitize']);
// myAppモジュールにmyControllerコントローラーを登録
app.controller('myController', function($scope) {
$scope.myData = {
text:"こんにちは",
html:'<span style="color:red;">こんにちは</span>'
}
});<div ng-app="myApp">
<div ng-controller="myController">
<p>{{myData.text}}</p>
<p>{{myData.html}}</p>
<p ng-bind="myData.text"></p>
<p ng-bind="myData.html"></p>
<p ng-bind-html="myData.html"></p>
</div>
</div>{{myData.text}}
{{myData.html}}
