ng-bindingは動作しませんが、ng-modelが動作します

Question

私はAngular（1.3.10）を使用することを学んでいます。カードのハンドのスーツと値を指定する2つの入力フィールドがあります。下の画像からわかるように、スーツとバリューをハードコードしようとすると、カードが正常に表示されます（右側に1枚）。しかし、それをバインドするためにng-modelを使用すると、ブラウザによって取り込まれても、card_valueは正しく表示されません。私は間違って何をしていますか？

<div ng-app = "cards"> 
    <form> 
     <div> 
      <input ng-model = "card_value"> 
      <span>of</span> 
      <input ng-model = "card_suit"> 
     </div> 
    </form> 

    <div> 
     <p>Entered: {{card_value}} of {{card_suit}}</p> 

     <!-- card.value is not binding up perfectly fine --> 
     <card value = "{{card_value}}" suit = "{{card_suit}}"></card> 
     <!-- --> 

     <!-- this shows up perfectly fine --> 
     <card value = "5" suit = "Clubs" ></card> 
     <!-- --> 
    </div> 
</div> 

私が表示されている参照して何を：

クロームインスペクタ：NG-結合が失敗した場所を強調表示されている部分があり、5

Answer 1

ng-bindあるべき結合一方向のデータを持っています。

ng-modelあなたはng-bind

<div ng-bind-html="card_value"></div> 

DEMO APP