title: When and when not to use {{...}} inside the AngularJS view file?
body: <p>I am trying to use a video player (the jwplayer) inside my AngularJS project. This post consists with 2 parts: part 1 for background, part 2 is my question. Thanks.</p>
  
  <p>PART 1: Solving the "Error loading player: No playable sources found" problem.</p>
  
  <p>At first the video is not showed, just a black rectangle on the page ui, and a quite misleading console message saying "No suitable players found and fallback enabled".</p>
  
  <p>Hours later I happened to change the jwplayer size configuration from "height:450, width:800" to "height:'100%', width:'100%'". This time jwplayer shows a message on the page ui: "Error loading player: No playable sources found".</p>
  
  <p>That gives me direction. My jwplayer usage looks like this:</p>
  
  <pre><code>&lt;!-- this is my index.html --&gt;
  &lt;div id="jw_container"&gt;Loading the player ...&lt;/div&gt;
  &lt;script&gt;
      var player = jwplayer("jw_container").setup({
          file:"{{model.my_video.video_url}}",
  ......
  </code></pre>
  
  <p>Change that file line to a hardcoded absolute video url will work, indicating that is the real problem. So eventually I got:</p>
  
  <pre><code>file: angular.element(document.getElementById('ng-wrapper')).scope().model.my_video.video_url,
  </code></pre>
  
  <p>and then problem solved, for now. (But still ugly, not intuitive, in my opinion.)</p>
  
  <p>================================ SEPARATOR ===================</p>
  
  <p>PART 2: My real question</p>
  
  <p>Coming from the world of traditional template engines, one might tend to use {{...}} wherever he wants. But in AngularJS, situation is different.</p>
  
  <p>Besides the above example, this is another example bit me before:</p>
  
  <pre><code>&lt;img title="{{my_title}}" src='logo.png'&gt; &lt;!-- This works --&gt;
  &lt;img src="{{my_image}}"&gt; &lt;!-- This doesn't. Use ng-src instead. --&gt;
  </code></pre>
  
  <p>So in general, <strong>when and when not to use {{...}} inside the AngularJS view file?</strong></p>