title: AngularJS Expression Not Working Correctly in ng-src with JSF
body: <p>The angularjs module. the <code>products</code> array contains 2 product objects that will be added as a property of the controller.</p>
  
  <pre><code>(function () {
      var app = angular.module('myApp', []);
      var products = [
          {
          title: "Dummy Title 1",
          description: "Dummy Description 1",
          image: "dummy_image_1.jpg"
          },
          {
              title: "Dummy Title 2",
              description: "Dummy Description 2",
              image: "dummy_image_2.jpg"
          }
      ];
  
  
      app.controller('myController', function () {
          this.products = products;
      });
  })();
  </code></pre>
  
  <p>The JSF Page, if I remove <code>images/{{product.image}}</code> with the actual image file name such as <code>images/dummy_image_1.jpg</code>, the images are displayed, but if I use angularjs expression instead, then nothing is shown. Please note that other expressions in the loop work besides <code>{{product.image}}</code>. If I add <code>{{product.image}}</code> somewhere else, then it displays the filename correctly, but used in <code>ng-srs</code>, it prints nothing if I view the html. I don't know why it is.</p>
  
  <pre><code>&lt;h:form&gt;
          &lt;div class="container" ng-controller="myController as controller"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-offset-10"&gt;
                      Hello&amp;#160;&lt;b&gt;&lt;h:outputText value="#{user.userName}"/&gt;&lt;/b&gt;&lt;br/&gt;
                      &lt;h:commandLink action="cart" value="Cart"/&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;hr/&gt;
  
              &lt;div ng-repeat="product in controller.products"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="media"&gt;
                          &lt;div class="media-left"&gt;
                              &lt;img class="media-object" ng-src="images/{{product.image}}"/&gt; &lt;!--If I replace that expression with a the image file name, it shows the image --&gt;
                          &lt;/div&gt;
                          &lt;div class="media-body"&gt;
                              &lt;h4 class="media-heading"&gt;{{product.title}}&lt;/h4&gt;
                              &lt;span class="caption"&gt;{{product.description}}&lt;/span&gt;&lt;br/&gt;
                              &lt;h:commandLink action="cart" value="Add to cart"/&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/h:form&gt;
  </code></pre>